手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >各浏览器padding、margin的差异
各浏览器padding、margin的差异
摘要:margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:IE6.0FirefoxOpera等...

margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:

IE 6.0 Firefox Opera等是

真实宽度=width+padding+border+margin

IE5.X

真实宽度=width-padding-border-margin

解决的方法是:

div.content {

width:400px; //这个是错误的width,所有浏览器都读到了

voice-family: ""}""; //IE5.X/win忽略了""}""后的内容

voice-family:inherit;

width:300px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的

}

html>body .content { //html>body是CSS2的写法

width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句

}

div.content {

width:300px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值

width(空格)/**/:400px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用

}

html>body .content { //html>body是CSS2的写法

width:300px; //支持CSS2该写法的浏览器有幸读到了这一句

}

各浏览器padding、margin的差异1

【各浏览器padding、margin的差异】相关文章:

火狐浏览器中DIV的高度不随里面的内容增高而增高

解决跨浏览器兼容的CSS编码准则

根据用户浏览器及分辨率调用不同的CSS样式文件

比较全的CSS浏览器兼容问题整理总结

FireFox浏览器和IE浏览器下CSS的兼容问题

CSS屏蔽Webkit浏览器input高亮和textarea缩放

CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

彻底清除浏览器js和css缓存的方法

浏览器不支持position: fix的解决

css在不同浏览器中的唯一标识以height属性为例

精品推荐
分类导航