分类“HTML/CSS/XML/XSL”所有日志

1、连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行。解决方法：《css之自动换行》 。连续的标点符号也不会转行，用属性 word-break:break-all; 无法达到效果，可以选用属性 word-wrap: break-word; 来解决！
2、有序列表的 li 在 IE 中，定了宽后，序号就变为1；定了浮动后，就没有了序号，Firefox 却不同。IE 认为：列表本来就不把序号算在实体内。
3、根据 CSS1，class 或 id 属性的值不能以数字 (0-9) 开头。更早版本的 Internet Explorer 允许这些值以数字开头。
4、在用 :after 方式清除浮动时，GBK 编码下切记不要在 content:””; 的引号中加任何字符，包括网上常见方式的点“.”，在opera下会产生问题。
div:after {
content:”";
display:block;
clear:both;
visibility:hidden;
height:0;
}
5、 opera 不支持 overflow... 3 条评论 »

今天在修改 淘宝 宝贝详情页面的时候，发现页面在 Firefox 下遇到这样一个问题：
链接用图片做背景，text-indent:-9999px; 隐藏文字，此效果在 IE 中是正常的，但在 Firefox 里，鼠标点击该链接时，虚线框却会包住被缩进的文字，结果显示为虚线框 N 长。（BTW: 因为平时是用 overflow:hidden; 属性的，所以一直也没有注意到这个问题的存在。）
虚线框，其实就是 CSS 中的 outline 属性，这也说明 IE 和 Firefox 对于 outline 和 border 的解析范围并不一致：IE 认为虚线框就是border的边缘，而 Firefox 则认为虚线框应该是文字范围。
那 W3C 中是如何定义 outline 的呢？
At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., [...]

有时候在一个页面用到收放功能的时候时，总有一个虚线框在触发收放的功能按钮上，显得特别刺眼，那如何去除这个虚线框呢？
虽然从可用性的角度，隐藏虚线框的做法会让键盘偏执狂不满。但从视觉上，有时候虚线框确实影响美观。
方法一：
IE 下可使用其私有的html属性：hideFoucs，在标签的结构中加入 hidefocus=”true” 属性。即：
<a href=”http://www.taobao.com” hidefocus=”true” title=”淘宝网，淘我喜欢”>淘宝网</a>
而在 Firfox 浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：
.HideFocus {
outline:none;
}
方法二：
也可以仅用 CSS 来控制，即对 IE 的情形使用 expression 表达式，但不推荐使用，毕竟 expression 在性能上有问题。
.HideFocus {
hide-focu... 3 条评论 »

今天偶然看到了一道题中有这样一段：
在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果
其实对于学习标准的人可能更多的人熟悉 Quirksmode ，也许很多人（对 JS 不太熟悉的朋友）或许要问：CSSCompat 模式是什么，我怎么没听过？其实这两种叫法是在不同的语言环境中的不同叫法。
document 有个属性 compatMode 可以用来判断当前页面采用的何种渲染方式：

BackCompat — Standards-compliant mode is not switched on.
CSS1Compat — Standards-compliant mode is switched on.

官方说明：http://msdn2.microsoft.com/en-us/library/ms533687.aspx
或许已经有朋友看出他们之间的某种对应关系：

CSS1Compat: Standards Mode
BackCompat: Quirks Mode

而所说的 CSSCompat Mode 也就是指我们平时所说的 Standards Mode 。
估计这道题目重点在考查应试者对 CSS 和 Javascript... 0 条评论»

很早在 蓝色论坛 做过一个调查《你使用的CSS命名规则 (单选) 》，调查结果如下（参与投票人数为83人）：

helloworld 2 (2.41%)
hello-world 9 (10.84%)
hello_world 52 (62.65%)
helloWorld 19 (22.89%)
HelloWorld 1 (1.20%)
其他 0 (0.00%)

从结果中可以看出使用率最好的为下划线命名法（ hello_world ），其次为骆驼式命名法（helloWorld），再次为连接符命名法（ hello-world）。而在其他语言中比较常见的帕斯卡（pascal）命名法、匈牙利命名法等在 CSS 的命名规则中则很少有人使用。
调查的最终结果并不能说明谁的对错，只是体现一种偏好。但更多人对某种的偏好，其实同时也更体现出其在某些地方的突出。仅为初学者入门提供了更好的选择。
偏好是自己的，“走自己的路，让别人去说吧”，嘿嘿……

当在 div 标签内无任何内容时：
<div></div>
如果给 div 元素设置了宽度时，比如 width:100% ，此时 div 在 IE 中（IE6，IE7）将占据物理空间，而在FF中不占据物理空间（正确理解）。为了表述直观，将样式直接写在元素标签内：
<div style=”width:100%”></div>
此时在 IE 中到底是什么在影响着最终的显示，又是如何解析的呢？
可能的影响因素：字体大小（font-size），字体行高（line-height），高度（height），溢出（overflow）
我们对上面的代码逐一添加过滤属性（具体的过程有兴趣的朋友，可以私下里实验一下，“自己动手，丰衣足食”！）
在测试的过程中，你会发现 IE6 和 IE7 的解析也不尽相同，比如在给 div 设置了 line-height:0; height:0; 的样式后，IE7 中显示正常了，不再占据物理空间了，而IE6 却依然我行我... 3 条评论 »

div.container {
border: 1px solid #000000;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
层套关系：container 的 div 包含 left 和 right
最简单的清除浮动的方法：
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
兼容情况：IE6 IE7 FF MacIE 等
来源地址：http://www.quirksmode.org/css/clearing.html

对于相同的结构，我们可以通过CSS来创造出40种不同的布局，可以从中学到布局的很多知识，也可以体验出CSS的强大和标准的便捷。
http://blog.html.it/layoutgala/

IE中z-index BUG
首先先来看一个演示例子的代码部分。
XHTML 部分：
<div id=”container”>
<div id=”box1″>这个box应该在上面</div>
</div>
<div id=”box2″>这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。</div>
CSS 部分：
#container {
position: relative;
}
#box1 {
position: absolute;
top: 100px;
left: 210px;
width: 200px;
height: 200px;
background-color: yellow;
z-index: 20;
}
#box2 {
position: absolute;
top: 50px;
left: 160px;
width: 200px;
height: 200px;
background-color: green;
z-index: 10;
}
两个 box 被完全的定位，背景色为黄色的 box1 拥有 z-index 属性值 20，而背景色为绿色的 box2 拥... 0 条评论»

z-index 属性简介
z-index : auto | number
auto: 默认值。
number: 无单位的整数值，可为负数 。
z-index 值较大的元素将叠加在 z-index 值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
注意：这个属性不会作用于窗口控件，如 select 对象。在IE5.5+中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe 对象是窗口控件，会忽略此属性。
z-index 属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z 轴）上的层叠顺序（stack order）。
每一个定位元素都归属于一个stacking context。根元素形成 root stacking context，而其他的 stacking context 则由定位元素产生（此定位元素的 z-index 被定义一个非 a... 1 条评论 »