/zz/div+css – Firefox和IE浏览器兼容问题 – padding-right在IE6下导致抖动

由于IE6的盒模型计算缺陷，padding-right在特定的情况会下导致抖动。 [出现抖动的代码]

<html>
<head>
<style type=”text/css”>
#outer{
width:100%;
}
#outer .line {
float: left;
padding-right: 10px;
}
#outer .line .first {
float: left;
}
#outer .line .second {
float: left;
}
</style>
</head>
<body>
<div id=”outer”>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div><div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=&103fquot;first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div><div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div><div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
</div>
</body>
</html>

[消除抖动的代码]

<html>
<head>
<style type=”text/css”>
#outer{
width:100%;
}
#outer .line {
float: left;
}
#outer .line .first {
float: left;
}
#outer .line .second {
float: left;
padding-right: 10px;
}
</style>
</head>
<body>
<div id=”outer”>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div><div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div><div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
<div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div><div class=”line”><div class=”first”>First</div><div class=”second”>Second</div></div>
</div>
</body>
</html>

[div+css – 关键词]div css
[div+css – 论坛]103fhttp://WebDev.board.newsmth.net/
http://WebGeeks.board.newsmth.net/
http://bbs.pku.edu.cn/, homepage看版
http://forum.csdn.net/SList/HTMLCSS/
http://groups.google.com/group/alt.html
http://groups.google.com/group/comp.infosystems.www.authoring.html
http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets
[div+css – 工具]

The W3C Markup Validation Service:, http://validator.w3.org/

微软印刷技术 – 自由字体信息, TrueType, OpenType, ClearType:, http://www.microsoft.com/typography/default.mspx

微软印刷技术 – WEFT 3 – 网页嵌入字体3 – 下载, http://www.microsoft.com/typography/web/embedding/weft3/download.aspx

[div+css – 常见问题]较验div+css格式，http://validator.w3.org/
div+css的margin缩写方式
div+css的padding缩写方式
链接的:link,:visited,:hover,:active四种状态

div+css使用backgroundRepeat样式设置背景图片的显示方式, http://msdn2.microsoft.com/en-us/library/ms530721.aspx

page-break-before设置打印分布符

url()指示符, http://www.w3.org/TR/CSS21/syndata.html#value-def-uri

!important规则, http://www.w3.org/TR/CSS21/cascade.html#important-rules

table中直接输入的文字和其他标记设置不同的颜色

CSS标准中级联的文档, http://www.w3.org/TR/CSS21/cascade.html#cascade

[div+css – Firefox和IE浏览器兼容问题]水平居中，Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中，Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记，Firefox支持!important标记，IE6忽略!important标记，!important需要放在前面才能起作用
手形鼠标指针，使用cursor: pointer;
padding的尺寸，在Firefox中padding是计算在width之外的，而IE6是计算在width之内的
margin的尺寸，在IE6中带有float样式的元素的margin尺寸计算有误，需103f要借助padding和!important标记实现兼容

使用word-wrap设置自动折行, 仅对IE有效

<li style=”overflow:hidden”>在Firefox下会丢失左侧的圆点

Internet Explorer的CSS参考资料, http://msdn2.microsoft.com/en-us/library/ms531209.aspx

用CSS实现cellSpacing属性效果, border-spacing: 10px; border-spacing: expression(this.cellSpacing=10);

padding-right在IE6下导致抖动

[div+css – CSS标准]

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:级联样式表第2级第1次修改(CSS 2.1)规范, http://www.w3.org/TR/CSS21/

4.3.2 Lengths长度, http://www.w3.org/TR/CSS21/syndata.html#length-units

边距属性, http://www.w3.org/TR/CSS21/box.html#propdef-margin-top

8.5 Border properties边框属性, http://www.w3.org/TR/CSS21/box.html#border-properties

[div+css – XHTML标准]

5.6. Table Modules – Table模块, http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#sec_5.6.