1. A标签的兼容性，伪类规范顺序：L-V-H-A;
':link' ：适用于未被访问的链接。
':visited' ：适用于已经访问过的链接。
':hover' ：在可视化客服端上，适用于光标（鼠标指针）指向一个元素，但还未激
活它时。
':active' ：适用于一个元素被用户激活时。
2. Font-family字体正确书写BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
3. 短横线与下划线不同的浏览器兼容不一样：
4. 单位缺失：CSS中与动态DOM中缺失单位兼容情况不一样；
A. DOM:
在IE、Opera、Firefox/Chrome/Safari(Q)中，使用DOM动态设置长度类型的CSS特性时，若设置的值没有单位，浏览器会自动为其添加“px”单位；在Firefox/Chrome/Safari(S)中，浏览器会将缺失单位的属性值忽略。
B. 所有浏览器的混杂模式均将此缺少单位类型的长度类型CSS特性理解为以“px”为单位；而所有浏览器的标准模式均将此认为是错误的CSS代码而忽略。
5. Firefox浏览器对table中绝对定位元素包含块的判定错误及其影响:这是Firefox的一个bug，绝对定位元素position:absolute无法在Firefox中根据它的祖先table定位，而会依赖更高一级祖先定位。Table元素指的是display:table;解决：设置祖先：position:relative;
6. 对于没有固定高度的绝对定位的元素，IE6解释为shrink-to-fit的自适应宽高；而其他浏览器会自动根据left/top值与祖先容器的大小来计算该元素的宽高；
解决：
A. 尽量固定绝对定位元素的宽高；
B. JS计算高度的解决办法：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="backgroundcolor:
gray;width:100px;height:100px;position:relative">
<div id="d" style="backgroundcolor:
black;position:absolute;left:10px;right:10px;top:10px;bottom:10px;color:white;_width:expression(- parseInt(this.style.left)-parseInt(this.style.right));
_height:expression(parseInt(this.offsetParent.currentStyle.height) -
parseInt(this.style.top)-parseInt(this.style.bottom));">test</div>
</div>
</body>
</html>
7. IE对CSS2.1的支持缺陷：
A. IE6(QS)/IE7(Q)/IE8(Q)不支持!important提高优先级的方式；
B. Display:inherit;//span元素将继承祖先div的block样式；但在IE6(QS)/IE7(Q)(S)/IE8(Q)中不会继承；
C. 子选择器、兄弟选择器、相邻兄弟选择器、属性选择器：div>p{} div~p{} div+p{} div[id]；IE6(QS)/IE7(Q)/IE8(Q)中不支持；Bug：在IE7中，如果在兄弟之间有一个HTML注释，临近兄弟选择器将无效。
D. :first-child伪类匹配其他元素的第一个子元素；非锚点元素的:hover伪类；非锚点元素的:active伪类；:focus伪类定位获取了键盘焦点的所有元素，如input:focus{}；:before伪元素和:after伪元素用来在一个元素的内容之前或之后插入生成的内容，如p:before {
E. content: "before";
F. }
G. min-height 和 min-width这两个属性分别指定元素的高和宽的最小值，不允许一个盒子比指定的最小值小；max-height 和 max-width这两个属性分别指定元素的高和宽的最大值，不允许一个盒子比指定的最大值大。display 属性通常设置为block, inline, 或none。替代值包括：
• inline-block
• inline-table
• list-item
• run-in
• table
• table-caption
• table-cell
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group
H. outline特性：outline 是outline-style, outline-width, 和outline-color的缩写。该属性要优于border属性，因为它不会影响文档流。
I.
J. IE对子元素溢出祖先元素后，背景的解释不一样：IE将溢出部分也使用背景填充；而其他则不然；
解决：可用JS模仿一些低版本IE不支持的CSS标准。
8. IE中不合理的overflow-x和overflow-y组合：
Border会影响空白边是否折叠；
Overflow: visible,hidden,scroll,auto,inherit;
overflow和overflow-x/overflow-y的默认值都是'visible'。CSS3草案中规定，'overflow-x'和'overflow-y'的计算值与所设置的值相等，除非这一对值不合理。所以，如果其中一个被设置成'scroll'、'auto'、'hidden'之一，而另一个是'visible'，那么'visible'会被设置成'auto'。
同时设置overflow-x和overflow-y的值，不要使它出现其中之一'scroll'、'auto'、'hidden'时，而另一个是'visible'的情况。
9. Clear:如果有float:left;则相应的clear:left;和clear:both;能清除浮动；
在IE6(S)(Q)/IE7(S)(Q)/IE8(Q)如果clear特性被设置在一个浮动的元素上时，该浮动元素可能会与其前边的浮动元素放置在同一行。而且其后的浮动元素的位置也会出现不同情况。
解决：不要将“clear”特性应用在浮动元素上，以免出现上述不兼容的问题。
10. 空的有haslayout的块元素的高度问题：在IE6/IE7/IE8(Q)中，如果空的块级非替换元素触发了hasLayout，那么它的高度可能不是零，并且，这个高度跟font-size有关系。甚至，font-size是0的块级非替换元素的高度也不是0。还甚至，如果为该块元素设置了高度，这个高度会因为字体大小font-size而发生变化。
解决：如果想让一个块级非替换元素的高度为0，在IE中无法实现，但设置font-size为0可以使高度接近0；另外，不让元素在IE中触发hasLayout可以避免此bug。
11. 行内元素被其子元素的高度撑大：这类溢出，导致背景覆盖的情况不一致，IE会自动将溢出部分也添加背景；
解决方法：将该行内元素改为display:inline-block,其高度将会根据子元素自动计算高度；或者为其设置合适的font-size大小；
Width/height值可能被其内容撑大；
12. 避免使浮动元素的宽度超出其包含块的宽度；
当文字方向“direction”特性为“ltr”时应避免使右浮动元素的宽度超出其包含块的宽度。同样地，当文字方向“direction”特性为“rtl”时应避免使左浮动元素的宽度超出其包含块的宽度。
13. IE默认body背景色：
E6及IE(Q)中BODY元素的背景色不是CSS规定的transparent，而是#FFFFFF。这个#FFFFFF是由background-color:window得来，window属性为是Windows系统主题设定的“窗口背景色”，这个设置会影响很多程序的窗口背景色，而其他浏览器多不受此影响。
IE中IFRAME元素有一个专有的allowtransparency属性，当其值为“true”时，IFRAME元素可以透明。
14. Table的宽度，不要设定超过100%；不要设定内联宽度，而使用css的宽度；否则ff下会被撑大；
15. text-decoration:underline;作用于图片上，ie会忽略该样式，而标准会为img添加下划线；如果出现图片与文字同时存在，而又必须使用下划线的情况时，可以为图片增加白边调整高度以挡住下划线：如img {padding-bottom:3px; background:white; position:relative; top:3px;}
16. word-wrap: normal/break-word; 即当容器不足以包含单词时，单词将会强制换行。
注：对于select元素不使用wordwrap:break-word避免换行样式变形。
word-wrap:break-word可能导致在IE6/7及IE8(Q)中空格不被忽略
17. haslayout与block formatting context
18. z-index为自动时，不同定位的元素可能导致不同浏览器不同；所以，出现不同情况时，只能为特定层指定z-index来定位；
每个层叠上下文都有如下的层叠级别组成（显示顺序从后到前）：
1. 父级层叠上下文的背景和边框；
2. 层叠级别为负值的层叠上下文（越小越在下）；
3. 非行内、非定位的子元素；
4. 非定位的浮动子元素和它们的内容；
5. 行内非定位子元素；
6. z-index=auto的定位子元素，和任何z-index=0的层级上下文；
7. 层叠级别为正值的层叠上下文（越大越在上）。
19. 动态伪类:hover:focus:active是根据用户的动作而改变渲染效果；
不同浏览器支持情况不一致：IE6及IE7/8混杂模式仅支持A元素的:hover及:active，IE7标准模式支持所有元素的:hover但:active仍仅支持A元素，除IE8标准模式以外的IE均不支持:focus。
解决方案：
• 使用JavaScript绑定onmouseover/onmouseout（模仿:hover）、onmousedown/onmouseup（模仿:active）及onfocus/onblur（模仿:focus）；
• 使用Whatever:hover，该组件利用IE特有的CSS行为（behavior）仍然通过JavaScript来模拟这几个动态伪类的效果。
20. text-overflow可以作用于块级元素、行内元素和单元格，当其值是ellipsis时是作用是将被剪除的文本用省略号表示。
21. 各浏览器对CSS错误解析规则的差异及CSS hack.pdf
22.
23.
':link' ：适用于未被访问的链接。
':visited' ：适用于已经访问过的链接。
':hover' ：在可视化客服端上，适用于光标（鼠标指针）指向一个元素，但还未激
活它时。
':active' ：适用于一个元素被用户激活时。
2. Font-family字体正确书写BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
3. 短横线与下划线不同的浏览器兼容不一样：
4. 单位缺失：CSS中与动态DOM中缺失单位兼容情况不一样；
A. DOM:
在IE、Opera、Firefox/Chrome/Safari(Q)中，使用DOM动态设置长度类型的CSS特性时，若设置的值没有单位，浏览器会自动为其添加“px”单位；在Firefox/Chrome/Safari(S)中，浏览器会将缺失单位的属性值忽略。
B. 所有浏览器的混杂模式均将此缺少单位类型的长度类型CSS特性理解为以“px”为单位；而所有浏览器的标准模式均将此认为是错误的CSS代码而忽略。
5. Firefox浏览器对table中绝对定位元素包含块的判定错误及其影响:这是Firefox的一个bug，绝对定位元素position:absolute无法在Firefox中根据它的祖先table定位，而会依赖更高一级祖先定位。Table元素指的是display:table;解决：设置祖先：position:relative;
6. 对于没有固定高度的绝对定位的元素，IE6解释为shrink-to-fit的自适应宽高；而其他浏览器会自动根据left/top值与祖先容器的大小来计算该元素的宽高；
解决：
A. 尽量固定绝对定位元素的宽高；
B. JS计算高度的解决办法：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="backgroundcolor:
gray;width:100px;height:100px;position:relative">
<div id="d" style="backgroundcolor:
black;position:absolute;left:10px;right:10px;top:10px;bottom:10px;color:white;_width:expression(- parseInt(this.style.left)-parseInt(this.style.right));
_height:expression(parseInt(this.offsetParent.currentStyle.height) -
parseInt(this.style.top)-parseInt(this.style.bottom));">test</div>
</div>
</body>
</html>
7. IE对CSS2.1的支持缺陷：
A. IE6(QS)/IE7(Q)/IE8(Q)不支持!important提高优先级的方式；
B. Display:inherit;//span元素将继承祖先div的block样式；但在IE6(QS)/IE7(Q)(S)/IE8(Q)中不会继承；
C. 子选择器、兄弟选择器、相邻兄弟选择器、属性选择器：div>p{} div~p{} div+p{} div[id]；IE6(QS)/IE7(Q)/IE8(Q)中不支持；Bug：在IE7中，如果在兄弟之间有一个HTML注释，临近兄弟选择器将无效。
D. :first-child伪类匹配其他元素的第一个子元素；非锚点元素的:hover伪类；非锚点元素的:active伪类；:focus伪类定位获取了键盘焦点的所有元素，如input:focus{}；:before伪元素和:after伪元素用来在一个元素的内容之前或之后插入生成的内容，如p:before {
E. content: "before";
F. }
G. min-height 和 min-width这两个属性分别指定元素的高和宽的最小值，不允许一个盒子比指定的最小值小；max-height 和 max-width这两个属性分别指定元素的高和宽的最大值，不允许一个盒子比指定的最大值大。display 属性通常设置为block, inline, 或none。替代值包括：
• inline-block
• inline-table
• list-item
• run-in
• table
• table-caption
• table-cell
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group
H. outline特性：outline 是outline-style, outline-width, 和outline-color的缩写。该属性要优于border属性，因为它不会影响文档流。
I.
J. IE对子元素溢出祖先元素后，背景的解释不一样：IE将溢出部分也使用背景填充；而其他则不然；
解决：可用JS模仿一些低版本IE不支持的CSS标准。
8. IE中不合理的overflow-x和overflow-y组合：
Border会影响空白边是否折叠；
Overflow: visible,hidden,scroll,auto,inherit;
overflow和overflow-x/overflow-y的默认值都是'visible'。CSS3草案中规定，'overflow-x'和'overflow-y'的计算值与所设置的值相等，除非这一对值不合理。所以，如果其中一个被设置成'scroll'、'auto'、'hidden'之一，而另一个是'visible'，那么'visible'会被设置成'auto'。
同时设置overflow-x和overflow-y的值，不要使它出现其中之一'scroll'、'auto'、'hidden'时，而另一个是'visible'的情况。
9. Clear:如果有float:left;则相应的clear:left;和clear:both;能清除浮动；
在IE6(S)(Q)/IE7(S)(Q)/IE8(Q)如果clear特性被设置在一个浮动的元素上时，该浮动元素可能会与其前边的浮动元素放置在同一行。而且其后的浮动元素的位置也会出现不同情况。
解决：不要将“clear”特性应用在浮动元素上，以免出现上述不兼容的问题。
10. 空的有haslayout的块元素的高度问题：在IE6/IE7/IE8(Q)中，如果空的块级非替换元素触发了hasLayout，那么它的高度可能不是零，并且，这个高度跟font-size有关系。甚至，font-size是0的块级非替换元素的高度也不是0。还甚至，如果为该块元素设置了高度，这个高度会因为字体大小font-size而发生变化。
解决：如果想让一个块级非替换元素的高度为0，在IE中无法实现，但设置font-size为0可以使高度接近0；另外，不让元素在IE中触发hasLayout可以避免此bug。
11. 行内元素被其子元素的高度撑大：这类溢出，导致背景覆盖的情况不一致，IE会自动将溢出部分也添加背景；
解决方法：将该行内元素改为display:inline-block,其高度将会根据子元素自动计算高度；或者为其设置合适的font-size大小；
Width/height值可能被其内容撑大；
12. 避免使浮动元素的宽度超出其包含块的宽度；
当文字方向“direction”特性为“ltr”时应避免使右浮动元素的宽度超出其包含块的宽度。同样地，当文字方向“direction”特性为“rtl”时应避免使左浮动元素的宽度超出其包含块的宽度。
13. IE默认body背景色：
E6及IE(Q)中BODY元素的背景色不是CSS规定的transparent，而是#FFFFFF。这个#FFFFFF是由background-color:window得来，window属性为是Windows系统主题设定的“窗口背景色”，这个设置会影响很多程序的窗口背景色，而其他浏览器多不受此影响。
IE中IFRAME元素有一个专有的allowtransparency属性，当其值为“true”时，IFRAME元素可以透明。
14. Table的宽度，不要设定超过100%；不要设定内联宽度，而使用css的宽度；否则ff下会被撑大；
15. text-decoration:underline;作用于图片上，ie会忽略该样式，而标准会为img添加下划线；如果出现图片与文字同时存在，而又必须使用下划线的情况时，可以为图片增加白边调整高度以挡住下划线：如img {padding-bottom:3px; background:white; position:relative; top:3px;}
16. word-wrap: normal/break-word; 即当容器不足以包含单词时，单词将会强制换行。
注：对于select元素不使用wordwrap:break-word避免换行样式变形。
word-wrap:break-word可能导致在IE6/7及IE8(Q)中空格不被忽略
17. haslayout与block formatting context
18. z-index为自动时，不同定位的元素可能导致不同浏览器不同；所以，出现不同情况时，只能为特定层指定z-index来定位；
每个层叠上下文都有如下的层叠级别组成（显示顺序从后到前）：
1. 父级层叠上下文的背景和边框；
2. 层叠级别为负值的层叠上下文（越小越在下）；
3. 非行内、非定位的子元素；
4. 非定位的浮动子元素和它们的内容；
5. 行内非定位子元素；
6. z-index=auto的定位子元素，和任何z-index=0的层级上下文；
7. 层叠级别为正值的层叠上下文（越大越在上）。
19. 动态伪类:hover:focus:active是根据用户的动作而改变渲染效果；
不同浏览器支持情况不一致：IE6及IE7/8混杂模式仅支持A元素的:hover及:active，IE7标准模式支持所有元素的:hover但:active仍仅支持A元素，除IE8标准模式以外的IE均不支持:focus。
解决方案：
• 使用JavaScript绑定onmouseover/onmouseout（模仿:hover）、onmousedown/onmouseup（模仿:active）及onfocus/onblur（模仿:focus）；
• 使用Whatever:hover，该组件利用IE特有的CSS行为（behavior）仍然通过JavaScript来模拟这几个动态伪类的效果。
20. text-overflow可以作用于块级元素、行内元素和单元格，当其值是ellipsis时是作用是将被剪除的文本用省略号表示。
21. 各浏览器对CSS错误解析规则的差异及CSS hack.pdf
22.
23.
扫一扫
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
