css padding兼容性问题

《css padding兼容性问题》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、首先谈谈!important问题的引起（盒模型问题）:　　　　在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border）和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如，　　Firefox（FF）是准确按照CSS标准：width为内容的宽度，也就是说：　　层的宽度=width+padding(leftandright)+border-width；　　而IE则把width作为整个层的宽度：　　内容的宽度=width-padding-borde

2、r-width；　　　　IE的这种解析，被认为是一个BUG。但事实上，这种解释也不无道理，人们在设计页面的时候关注得更多的是盒子的大小，而不是内容的大小。正是因为浏览器的不同解析，给CSS的设计带来一些困难。　　　　针对这个问题，我们经常使用!important来区分Firefox和IE6.0：　　程序代码:　　#content　　{　　　　width:414px!important;　　　　width:400px;　　　　padding:5px;　　　　border-width:2px;　　}　　Firefox识别!important，而

3、IE不识别，且!important的width优先级高，因此FF理解为width:400px，IE6.0理解为width:414px，从而显示就相同了。　　　　　　但是问题出在IE7，IE7.0对!important有了识别能力，但是对盒模型的解析却和IE6.0等一样，从而造成很大的麻烦。也就是说，!important的方法在IE7.0下变得不适用了。　　　　而一般的情况下，border的使用相对较少的，并且border-width一般较小，因此最主要的问题就出在padding上了。网上很多人总结的经验是：padding要尽量少用，能用ma

4、rgin的，就别用padding。这种说法是消极的，问题的解决不应该总是回避。　　　　盒模型问题的解决：　　　　仔细想想，其实问题就出在“width与padding/border-width的同时定义”上。而明白了这一点，解决的方法就不难想到了，只要添加一个无width定义的wrapper层，把原来的一个content层拆分成2个层，在wrapper中定义padding和border-width，然后在content中定义width：　　程序代码:　　#wrapper{padding:5px;border-width:2px;}　　　　#c

5、ontent{margin:0px;width:400px;}　　程序代码:　　　　　　　　　　　　...