Firefox和IE的CSS兼容性问题漫谈

先从设置最小高度:min-height说起吧

对于某些内容可变的层(比如用户评论),我们希望它有个最小的高度(比如30px),这样的话,即使内容只有一行字,也不会太难看;同时又希望在内容比较多的时候,层的高度能自动撑开,也就是要求height: auto。这时候就可以设置css的min-height属性。min-height在Firefox里有效,但IE无法识别。可以使用下面这个解决方案:

.div_class{min-height:30px;height:auto !important;height:30px;}

第一行设置 min-height:30px;对Firefox有效;第二行height:auto !important;也对Firefox有效,后面紧跟的“!important”是Firefox专用的一个标记,带有这个标记的设置具有最高优先级,之后的设置都无效。所以第三行的height:30px对Firefox无效了;同时,由于IE无法识别min-height和“! important”,所以只有第三行有效,由于IE默认就是高度自适应的,所以即使设置了30px的高度,只要内容很多,也会自动撑开,不需要设置 height:auto。最后,上述代码产生如下效果:

对于Firefox,等同于:

.div_class{min-height:30px;height:auto;}

对于IE,等同于:

.div_class{height:30px;}

“!important” 是个非常好用的东西,如果你写过几个月的跨浏览器的CSS代码,就很容易被Firefox和IE之间的差别而感到恼火。比如padding属性就是一个例子。

假设这样一个层:

.div_name {width:100px;padding:10px;}

在IE里面,层的宽度是100px,四周的余空为10px;但是对于Firefox,层的宽度变成了100px+10px+10px=120px,对于宽度敏感的设计来说,整个就混乱了。怎么办呢?还是求助于“!important”吧。只要这样写就可以了:

.div_name {width:80px !important;width:100px;padding:10px;}
因为80+10+10=100。正好让宽度 变成100px。

有时候,我们给一个层加上边框 ,在Firefox里面也会出现宽度增加的情况,比如:

.div_name {width:100px;padding:10px;border:2px solid #ccc;}

上面这个层,在Firefox里面的实际宽度等于100+10+10+2+2=124px,因为边框也会增加宽度。怎么办呢,还是靠“!important”,这样写就可以了:

.div_name {width:76px !important;width:100px;padding:10px;border:2px solid #ccc;}

写CSS经常要做这样的计算,还要写很多!important,苦了设计师们,什么时候IE和Firefox的CSS标准统一就好了。

23 thoughts on “Firefox和IE的CSS兼容性问题漫谈”

  1. Several posts worthwhile reading on here and a load of positive info. If you do by any chance happen to find the time, have a look at my site and skim my posts and afford yours truly a comment

  2. Many posts worthwhile reading on here and a lot of sound information. If you do by any chance happen to find the time, have a look at mine and peruse my posts and give yours truly a comment.

  3. I venture there are lots of somebodies like me, who happen across varied good blogs or web sites by luck. Your web log seems to possess a solid community and a sound blogosphere presence. Its healthy to hold engrossing and assorted perspectives on issues.

  4. I guess there are masses of individuals like me, who stumble across various good blogs or sites by fortune. Your blog appears to have got a solid community and a great blogosphere presence. Its healthy to hold absorbing and various views on issues.

  5. I imagine there are heaps of people like me, who stumble across varied great blogs or sites by chance. Your site seems to possess a good community and a strong blogosphere presence. Its positive to hold interesting and diverse views on issues.

  6. Have you ever considered adding additional videos to your blog to keep the viewers more involved? I just read through the whole article and it was very nice but since I am more of a visual learner, I find videos to be more helpful. I like what you guys are always up too. Keep up the excellent work. I will return to your blog on the regular for some new post.

  7. Have you ever considered adding additional videos to your site to keep the viewers more involved? I just read through the whole article and it was very nice but since I am more of a visual learner, I find videos to be more helpful. I like what you guys are always up too. Keep up the excellent work. I will return to your website on the regular for some new post.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>