css 在ie firefox下宽度不同的解决方法

一、
{*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解 这是什么原理：

　　*对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别;

　　!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.

　　(1)区别ie与firefox的hack为:border:2px solid #f00;*border:1px solid #f00;

     (2)区别Ie6.0 与Ie7.0、firefox的hack为:border:1px solid #f00!important;border:2px solid #f00;

　　在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie 系列进行了两次border设置后，后一个属性覆盖了前一个属性，故为一像素的边框。

　 　在(2)中，之所以把!important放在第一个border 设置，是因为它把这次border的优先级提高了，即使后面在一次甚至在N次设置border 也无效，但是Ie6.0对这个规则不接受，而导致它应用了第二次的border 设置，也就是第二次覆盖了第一次的这一原理， 并不是它不识别!important;所以它的border为2 像素的红框.

二、
首先我们说说firefox和IE对CSS的宽度显示有什么不同： 
　　其实CSS ’width’ 指的是标准CSS中所指的width的宽度，在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer ’width’则是指整个容器的宽度，包括内容，padding ，border。 
Firefox中：容器占的宽度=内容宽度+padding宽度+border宽度 
IE中：内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度 

　　所以，如果IE中定义 width:120px;padding:5px 的话，所显示的宽度就是120px. 
　　即padding:5px是在width里面。 
　　而Firefox中，上面这个定义，显示宽度就是 130 px; 
　　所以，我们就必须这样定义 

width:115px !important;width:120px;padding:5px;

　　必须注意的是， !important; 一定要在前面。 

三、 

例如:<p style="padding-top:50px;*padding-top:30;_padding-top:20px;">我们</p>解释下上面代码;*表示所有IE浏览器可识别;_表示只有IE6可以识别;不写表示所有浏览器识别;(+好象意思是只对IE7浏览器识别,这个我忘了,不确定,你可以自己试试)用这样的办法来微调达到浏览器之间的一致.这办法可以对些小问题得到很好的帮助主要还是要扎实基本功,以后你会了解到更多好的解决你问题的办法