转自： http://blog.csdn.net/hu_zhenghui/article/details/1800833
div+css使用padding样式和!important标记实现Firefox和IE6处理带float样式的margin尺寸上的兼容
[示例代码]
<html>
<body>
<div style="width: 300px; float: left; border: 1px solid red; font-size: 12px; clear: both;">
按照margin的定义，margin中的距离应当是内部元素与外部元素之间的距离，下面的div的尺寸为width; 100px; margin: 100px;，总的宽度应该是width + 2 * margin，也就是300px，在Firefox中的效果正常。
</div>
<div style="border: 1px solid blue; float: left; clear: both;">
<div style="border: 1px solid red; margin: 100px; float: left; width: 100px; height: 100px; font-size: 12px;">
width: 100px;
height: 100px;
margin: 100px;
</div>
</div>
<div style="width: 500px; float: left; border: 1px solid red; clear: both;">
而在IE6中对于设置了float的元素，margin被重复计算了一次，总的宽度变成了width + 5 * margin，也就是500px。
</div>
<div style="clear: both; float: none;">
</div>
<div style="float: left; border: 1px solid red; height: 300px; width: 150px;">
按照margin的定义，margin中的距离应当是内部元素与外部元素之间的距离，下面的div的尺寸为height; 100px; margin: 100px;，总的高度应该是height + 2 * margin，也就是300px，在Firefox中的效果正常。
</div>
<div style="border: 1px solid blue; float: left;">
<div style="border: 1px solid red; margin: 100px; float: left; width: 100px; height: 100px; font-size: 12px;">
width: 100px;
height: 100px;
margin: 100px;
</div>
</div>
<div style="float: left; border: 1px solid red; height: 200px; width: 150px;">
而在IE6中对于设置了float的元素，margin在下侧被少计算了一次，总的宽度变成了width + 1 * margin，也就是200px。
</div>
<div style="clear: both; float: none;">
借助于padding样式和!important标记，可以实现Firefox与IE6的兼容效果。
</div>
<div style="border: 1px solid blue; float: left; clear: both; padding-bottom: 0px !important; padding-bottom: 100px;">
<div style="border: 1px solid red; float: left; width: 100px; height: 100px; font-size: 12px; margin-top: 100px; margin-bottom: 100px; margin-left: 100px !important; margin-right: 100px !important; margin-left: 50px; margin-right: 50px;">
width: 100px;
height: 100px;
margin: 100px;
</div>
</div>
</body>
</html>
[div+css关键词]
div css
[div+css重要工具]
[div+css的常见问题]
较验div+css格式，http://validator.w3.org/
div+css的margin缩写方式
div+css的padding缩写方式
链接的:link,:visited,:hover,:active四种状态
[div+css的浏览器兼容问题]
水平居中，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尺寸计算有误，需要借助padding和!important标记实现兼容
相关推荐
- **`.more { float:right; }`**: 让元素右浮动。 - **`.fl`, `.fr`**: 左浮动和右浮动的类名。 以上样式可以帮助开发者快速地建立一个干净、统一的基础样式，从而更容易地控制网页的布局和视觉效果。 综上所述，...
float : left; top : 2 rem ; bottom : 20 px ; left : 100 px ; right : 100 px ; letter-spacing : -1 px ; cursor : pointer !important ; text-transform : uppercase; margin : 100 px 50 px ; ...
<h1>Float right ``` 对于这个示例，我们可以使用以下 CSS 来确保在不同的浏览器下布局正确： ```css #wrap { border: 6px solid #ccc; overflow: auto; /* FF & IE7 */ _height: 1%; /* IE6 */ } .column...
2. **浮动元素问题**：在屏幕显示中，浮动元素（如`float: left`或`right`）可能在打印时造成混乱。使用`clear`属性或调整布局以适应打印环境。 3. **背景色和图像**：默认情况下，浏览器可能不会打印背景色和图像...
margin-right:.73em;vertical-align:top}#gbar{float:left}}.gb2{display:block;padding:.2em .5em}a.gb1,a.gb2,a.gb3{color:#00c !important}.gb2,.gb3{text-decoration:none}a.gb2:hover{background:#36c;color:#...
在Firefox中，可以通过设置`margin-left`和`margin-right`为`auto`使div居中，但IE不支持此方法。此时，需要为body设置`text-align:center`，并为div添加`margin: auto`来实现居中效果。 关于padding的影响，Fire...
- **IE vs Firefox**: 在Firefox中，可以通过设置`margin-left`和`margin-right`为`auto`实现元素居中，而IE浏览器则不支持这种方法。解决方法是在所有浏览器中使用`margin: auto`实现居中。 - **文本居中**: 设置`...
2. **居中对齐**：Firefox中，设置`div`的`margin-left`和`margin-right`为`auto`即可实现居中，但IE6和IE7需要通过设置`body`的`text-align`为`center`，然后让`div`的`margin`自动调整。 3. **高度和宽度的适应**...
important` 关键词被用来确保IE6和IE7识别绿色背景，而其他浏览器则显示蓝色背景。 3. **IE7 和 Firefox 的兼容处理：** - 如果需要IE7和Firefox有相同的背景颜色，而与其他浏览器不同，则可以使用如下方法： ```...
- **问题描述**：在设置 `div` 的 `margin-left` 和 `margin-right` 属性为 `auto` 实现水平居中时，IE 中需要设置 `body` 元素的 `text-align` 为 `center`；而在 FF 中，则需确保 `div` 元素的宽度小于其父容器的...
要在Firefox和IE中为链接添加边框和背景色，通常需要设置`display: block`以阻止换行，并可能需要`float: left`以保持布局。此外，为了消除底部显示错误，可能需要为`a`元素和包含它的容器设置高度。 6. `cursor`...
在火狐中，只需将`margin-left`和`margin-right`设置为`auto`，div就能水平居中。但IE需要在body上设置`text-align: center`，然后在div上设置`margin: auto`。 3. **FF: body设置text-align时，div需要设置margin...
- 在Firefox中，当设置`div`的`margin-left`和`margin-right`为`auto`时，可以使其居中。 - **示例代码：** ```css .center-div { margin-left: auto; margin-right: auto; width: 200px; } ``` #### 三、...
`以防止换行，并且可能需要`float: left;`来保持布局。同时设置`height`可以防止底部显示错误。 9. **BOX模型的差异**：IE5和6使用不同的盒模型，导致元素的宽度计算方式不同。可以通过使用`!important`和CSS hack...
- Firefox可以通过设置`margin-left`和`margin-right`为`auto`使`div`居中，但IE不行。此时，可以给`body`设置`text-align: center`，然后让需要居中的`div`内部设置`margin: auto`。 3. **盒模型差异**： - FF中...
2. **自动居中**：Firefox可以通过在`body`上设置`text-align:center`，然后在`div`上设置`margin: auto`使内容居中，但IE不支持这种方式，需要在`div`上同时设置`margin-left`和`margin-right`为`auto`。...
为两边层都设置浮动或在左层添加`margin-right:-3px;`可消除间距。 13. **IE6子元素绝对定位问题**： 父元素有padding时，子元素绝对定位不准，可在子元素中添加`_left:-20px; _top:-1px;`进行微调。 14. **...