解决IE6 IE7 IE8 Firefox浏览器兼容性

今天在导航栏中额外添加了一个链接，在IE7 IE8和Firefox都很正常，但是在IE6下面却无法查看到。就是这个页面的导航栏，我额外添加了一个PHP博客链接，但是在IE6下面从系统优化后面的ThinkPHP和PHP博客这二个链接都是无法显示的。这种情况下不是你的后台程序有问题，而是前台CSS兼容性的问题。

我的导航栏li 标签的一个属性 width 宽度设置为了70px，导航栏上14个链接，每个链接70px,总长度已经超过了导航栏总长，所以在IE6下面是无法查看到的，溢出的部分被隐藏了。

解决IE6 IE7 IE8和Firefox浏览器兼容性

如果一个css属性你想在Firefox里首选使用，那么在这个属性后面加上 !important;如：

width:70px !important;

width:60px;

那么上面的代码在Firefox下宽度为70px，而不是下面重新设置的60px.

IE6支持下划线"_"，所以如果一个属性你想在IE6下首选使用，则使用"_"加属性的形式，如"_width:60px;"则在IE6下是可以运行的。

IE7支持加号"+"，所以如果一个属性你想在IE7下首选使用，则使用"+"加属性的形式，如"+width:100px;"则在IE7下是可以正常运行的。

看一个完整的例子：

#nav li{

width:70px; //所有浏览器显示

+width:60px; //IE7下显示

_width:55px; //IE6下显示

width:40px !important; //Firefox下显示

}

大家动手去试试吧!

猜你喜欢