29 2008

解决调试CSS布局IE6,IE7,Firefox下不兼容的方法

Published by at 14:48 under CSS,Web技术

解决IE6,IE7,Firefox下调时css不兼容的问题大致有两种方法,今天测试了一下,感觉不错。以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

2, IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为IE7特有标签.

<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>

下面分别给出IE6IE7Firefox的hack代码:

#example { color: #333; }      /* Firefox */* html
#example { color: #666; }      /* IE6 */*+html
#example { color: #999; }      /* IE7 */
那么在Firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999,他们之间互不干扰。

注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“>

No responses yet

Trackback URI | Comments RSS

Leave a Reply

You must be logged in to post a comment.