网站建设,我们主要为您解决两个问题:
1、钱是花了但是做出来的网站效果不理想怎么办?答:我们承诺:先看效果后付款。
2、网站做好以后,出了问题找不到技术人员怎么办?答:10+年经验,服务从未间断。
如何解决CSS的padding属性在IE浏览器和火狐Firefox的兼容性问题?
阅读:41369  日期:2008-1-3类别:网站策划设计  来源:http://www.lg80.com

在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排版的网站多几倍的时间。