三种浏览器的识别问题:
1 2 3 | #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */ |
首先火狐不识别任何特殊符号,但是识别!important;而IE6识别*和_,而IE7则识别*也识别!important;但是不识别_
所以在出现IE7之前我们可以用!important;*来调整页面,但是IE7的出现却打乱了我们的方法!!
在大部分情况下,调整好火狐和IE7后,IE7不会出现太大的差距,一般情况下出现的问题就是
浮动ie产生的双倍距离
举一个网上大侠的例子:
1 2 | #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} |
这句display:inline很重要!!
这里牵扯到一个问题,因为IE存在CSS向后继承,而Firefox不支持,因此如果我们不对每个标签定义使用浮动float属性的话,在Firefox中就会出现DIV溢出。使排版混乱.
另外的问题就是margin属性的像素差问题.
举个例子来解决:
margin-left:30px!important;margin-left:28px;
由于!important;只有IE7和Firefox识别,因此会默认执行margin-left:30px,而IE6不识别!important;因此会执行margin-left:28px;这样,用相同的方法,我们就可以清除2px像素的差来达到无缝衔接.由于在使用margin 或padding 时,我们会发现padding所出现的差值问题要比margin少的多的多!因此我强烈建议大家能用padding的时候尽量不要使用margin,这样会减少很多麻烦.