Css中padding的兼容性问题
2017-05-10 10:29:21
在padding数值比较大的地方（比如标题栏的背景div和标题之间），浏览器的差别就显示的很明显。 比如CSS原来是这样的：
.titleblock{}{ padding:2em;margin:0;text-align:left; background-image:url(‘../image/titlebg.jpg’);height:140px; background-repeat:no-repeat;background-position:rightcenter; }
其中的height属性为140px，在FF中整个div的高度是140+2*(2em)约为190px，而在IE6和IE7中均为140px，这样就导致有大概50px的差别。我们知道，在css中，padding用的实在太多了，怎么解决这个兼容性问题呢？
1、IE与FireFox识别CSS属性区别标签 !important
#page_body{
width: 1000px !important;
height:30px !important;
width: 980px ;
height:36px ;
}
以上样式
在IE6/7中只执行width: 980px与height:36px
FireFox中则优先执行带有!important标签的CSS行width: 1000px与height:30px
记住，以上代码的顺序不能颠倒。
2、div居中区别
FF:margin:0 auto 0 auto !important;
IE:margin:0 auto;
FF: div 设置 margin-left, margin-right 为 auto 时已经居中
3、文本内容居中FF:margin:0 auto 0 auto !important;text-align:center
IE:text-align:center
FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4、width与margin,padding之间的宽度计算问题区别
一个600px宽的div，margin,padding的值计算区别
ie{width: 600px;margin:10px;padding10px;}
在Firefox中应修改为
FF{width: 560px;margin:10px;padding10px;}
也就是说在FF中，margin,padding的左右值也要算在width中，600-10×2-10X2=560px
在进行Div+Css重构中，IE与FF的排版结构中，最关键是第二和第四点，如果不处理好以上几个问题，那么你的你的网站在IE中浏览是那么定位精确，排版完美，一到Fire Fox中就是乱七八糟，横七树八的。所以，如果你要把你的网站改为一个兼容性完美的Div+Css网站，那么你就准备大量的CSS知识，要为一些兼容BUG付出比较用table排版的网站多几倍的时间。
发表评论：