div+css使用padding样式和!important标记实现Firefox和IE6处理带float样式的margin尺寸上的兼容

原创 2007年09月26日 08:02:00

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&amp;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实现Firefox和IE6/7兼容的垂直居中

Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6/7中则需要借助IE6/7中css的特点实现垂直居中。为了实...
  • wzhiu
  • wzhiu
  • 2013-02-28 17:38
  • 1510

CSS样式important和*和_:兼容IE、Firefox、Opera和Safari CSS的解决方法及CSS差别

1、IE6、IE7都支持 *,但IE8终于回归正统,放弃了对*的支持2、IE7、IE8、Firefox、Opera、Safari都支持 important顾名,important的优先级要高. 举例说...
  • hxp42
  • hxp42
  • 2011-03-01 15:54
  • 540

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

css div 遮罩层 兼容IE6-IE9 FireFox

Html代码: 数据加载中,请稍后... CSS样式: /*loading加载遮罩层css*/ #black_overlay { po...

DIV+CSS设计IE6、IE7、Firefox兼容性

你对DIV+CSS设计IE6、IE7、Firefox兼容性问题是否比较熟悉,这里和大家分享一下,对完全使用DIV+CSS设计的网页,就应该更注意IE6、IE7、Firefox对CSS样式的兼容。 D...

jquery的css()对组合的属性无法获取(background,font,margin,padding)(ie6、7)

jquery的background获取问题 .demo { font:12px/24px Verdana, Geneva, sans-serif; background:#F00; w...

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-...

(十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法

简单方法: IE6,IE7,IE8,FF的兼容方法(2) 浏览器兼容代码: 浏览器 符号 IE6 IE7 IE8 FF * !important _ \9*html *+html 说明:代表能识别...
  • sabic
  • sabic
  • 2012-06-18 08:21
  • 1207

DIV+CSS--IE6,IE7,IE8,Firefox兼容的(转)

转载自 虫的传人 最终编辑 虫的传人 IE6,IE7,IE8,Firefox 兼容的css hack 补充: .color{ background-color: #C...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)