以!important的CSS定义兼容不同浏览器.docx

以!important的CSS定义兼容不同浏览器
发布时间：2006年08月11日点击数：7797次
CSS定义对于不同浏览器的兼容性问题一直比较困惑。不管是用div+CSS还是table来进行页面设计，我对WEB重建的理解是：速度与兼容性。即要尽可能提高浏览者访问页面时浏览的速度、要使页面能尽可能兼容不同来访浏览器的浏览效果。所以近期的设计都是打开几个不同的浏览器进行测试，如IE、GoSuRFBrowser、Opera和Firefox浏览器。测试结果表明，IE和GoSuRFBrowser对CSS的支持最好，Opera其次，Firefox要求最高。
先看下面的效果：
以下图片是在IE浏览器、GoSuRFBrowser浏览器和Opera浏览器中看到的效果：

在MozillaFirefox浏览器中看到的效果：

其中在IE和GoSuRFBrowser浏览器浏览时的效果基本没差别，居中正常；Opera浏览器中对于这里居中效果也正常（但对于页面其他地方就有些问题，这在后面再研究）；在MozillaFirefox浏览器中看到的效果就不同了，居中是对的，但是二边都没对齐，抓图仔细查看了下，二边多出了5个像素的宽度，并且里面的缩进量都有问题。
先看看CSS中对于中间区域的定义：
#mainall{width:760px;height:300px;padding:5px;margin:0auto;background:#fff;}可能是padding:5px;这个缩进量Firefox不支持，先测试将“padding:5px;”改成“padding:0px;”，保存后浏览，二边多出了5个像素的宽度就不见了。就是它了。在CSS中再加一句：“padding:0px!important;”：
#mainall{width:760px;height:300px;padding:0px!important;padding:5px;margin:0auto;background:#fff;}!important的作用是提升指定样式规则的应用优先权，但IE不支持的值，CSS中即使定义了IE也会忽略这它而选择按后面的定义执行并显示，而Opera和Firefox却会按!important指出的规则优先显示。看下浏览效果：

首先二边对齐的问题解决了。但是右侧的div内容却被挤到下面去了。很可能是宽度不够的缘故。再看下左右二个div的定义：
/*===中部左侧定义开始===*/#mainbox{padding:10px;float:left;width:495px;background:#fff;}/*===中部右侧定义开始===*/#rightbox{float:right;padding:5px;width:250px;height:100%;background:#F6F7F9;}应该是这个狐狸（Firefox）将padding这个补丁边距的缩进量，不但是只具有缩进效果，并且还让浏览器解析成：整个box的宽度为width＋padding了！晕哦，找到这个原因，解决起来方便些了：将整个box的宽度在Firefox中应该计算为（width－padding）。让!important来做这个工作吧：
/*===中部左侧定义开始===*/#mainbox{padding:0px!important;/****兼容Firefox浏览器*****/padding:10px;float:left;width:495px;background:#fff;}/*===中部右侧定义开始===*/#rightbox{float:right;padding:5px;width:250px;height:100%;background:#F6F7F9;}再次浏览，终于左侧上去了，哈哈，应该就是这个问题啦。但是问题又来了，右侧怎么灰色的标题栏到边界外面去了？

再看CSS定义：
#rightboxdt{padding:3px!important;/****兼容Firefox浏览器*****/padding:3px;margin:0px;border:0px;width:100%;font-weight:normal;font-family:宋体;font-size:12px;color:#fff;background:#A6A9AE;text-align:left;}#rightboxdd{padding:5px!important;/****兼容Firefox浏览器*****/padding:10px;margin:0px;border:0px;text-align:left;width:100%;font-weight:normal;font-family:宋体;font-size