div+css使用padding样式和!important标记实现Firefox和IE6处理带float样式的margin尺寸上的兼容
2007-09-26 08:02
996 查看
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重要工具]
Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en[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标记实现兼容
相关文章推荐
- div+css使用!important标记实现Firefox和IE6处理padding尺寸上的兼容
- div+css使用!important标记实现Firefox和IE6处理padding尺寸上的兼容
- div+css实现Firefox与IE6兼容的手形鼠标指针
- div+css - Firefox和IE浏览器兼容问题 - padding-right在IE6下导致抖动
- CSS实现的div悬浮框并且兼容IE6的样式
- div+css实现Firefox和IE6兼容的垂直居中
- div+css实现Firefox和IE6兼容的垂直居中
- 使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu
- css div实现的遮罩层完美兼容IE6-IE9 FireFox
- 使用css制作三角,兼容IE6,用到的标签<div><s><span>
- 如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- CSS实现图片超过限定尺寸自动缩放兼容IE和Firefox
- css padding在ie7、ie6、firefox中的兼容问题
- 兼容IE6,IE7,IE8,Firefox,Chrome,DIV+CSS垂直居中终于失败,最后三分钟用写了几行JS解决,经简单测试,还行。
- div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
- 使用css制作三角,兼容IE6,用到的标签&lt;div&gt;&lt;s&gt;&lt;span&gt;
- 避开ie6使用float后再使用margin兼容的2种方法
- 【转贴】div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式