css 在ie firefox下宽度不同的解决方法
2012-05-10 10:35
656 查看
一、
{*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; 一定要在前面。
三、
{*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浏览器识别,这个我忘了,不确定,你可以自己试试)用这样的办法来微调达到浏览器之间的一致.这办法可以对些小问题得到很好的帮助 主要还是要扎实基本功,以后你会了解到更多好的解决你问题的办法
相关文章推荐
- DIV+CSS Padding在Firefox与IE下效果不同的解决方法
- 在firefox与IE下DIV+CSS Padding效果不同的解决方法
- 在firefox与IE下DIV+CSS Padding效果不同的解决方法
- DIV+CSS Padding在firefox与IE效果不同的解决方法
- 常用IE与Firefox的CSS兼容差异及解决方法
- IE6/IE7/Firefox兼容性的CSS解决方法
- XMLHttpRequest 乱码问题 在firefox IE的不同解决方法
- IE、Firefox、Opera和Safari对CSS样式important和*和_的支持 兼容CSS的解决方法及CSS差别
- IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决方法
- CSS样式important和*和_:兼容IE、Firefox、Opera和Safari CSS的解决方法及CSS差别
- ul在Firefox和IE下的不同表现的解决方法
- ul在Firefox和IE下的不同表现的解决方法
- CSS样式important和*和_:兼容IE、Firefox、Opera和Safari CSS的解决方法及CSS差别
- Opera、FireFox、IE、Safari中CSS差别及兼容CSS的解决方法
- 关于Firefox和IE下的CSS表现的几个问题和解决方法
- java 不同意同一账户不同IP 同一时候登录系统解决的方法 兼容IE Firefox
- IE和FIREFOX下CSS的区别与解决方法第1/2页
- IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决方法
- XMLHttpRequest乱码问题在Firefox与IE下的不同解决方法
- CSS样式important和*和_:兼容IE、Firefox、Opera和Safari CSS的解决方法及CSS差别