CSS表述对于那些差异网络访问器的兼容模式间题时不时更难点。不怕是用div+CSS更是table来实行对话框设置，我对WEB再建的体谅是：转速与兼容模式。即要尽将增加网络访问者网络访问对话框时网络访问的转速、要使对话框能尽将兼容差异拜访网络访问器的网络访问使用效果。因为近年来的设置全部都是访问几条差异的网络访问器实行测验，如IE、GoSuRF Browser、Opera和Firefox网络访问器。测验报告单表达，IE和GoSuRF Browser对CSS的认可做好，Opera再者，Firefox的要求极限。 　　首先来看接着的的效果： 　　以內高清图片是在IE阅览访问器、GoSuRF Browser阅览访问器和Opera阅览访问器中看过的功能：

　　在Mozilla Firefox看器中遇到的效率：

　　但其中在IE和GoSuRF Browser访问记录器访问记录时的治疗目的大多没很大，居中健康；Opera访问记录器中关于这里的居中治疗目的也健康（但关于html页面的地区就一部分方面，这在里边再探讨）；在Mozilla Firefox访问记录器中看看的治疗目的就有差异 了，居中是对的，有时候二边都没居中，抓图缜密察看了下，二边多了一个了2个图片像素的参数，以及底下的缩进量皆有方面。

　　先看看CSS中对于中间区域的定义：

#mainall { width: 760px; height: 300px; padding: 5px; margin: 0 auto; 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: 0 auto; 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定义：

#rightbox dt { 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; } #rightbox dd { padding: 5px !important;　/****兼容Firefox浏览器*****/ padding: 10px; margin: 0px; border: 0px; text-align: left; width: 100%; font-weight: normal; font-family:宋体; font-size: 12px; line-height: 24px; }

　　
　　这里设置了标题#rightbox dt的宽度为100%，测试一下，去掉这个定义就显示正常了，用相同的手法处理下，加上个定义“width: !important;”，让Firefox先认识这个定义而丢弃width: 100%的定义即可：

#rightbox dt { padding: 3px !important;　/****兼容Firefox浏览器*****/ padding: 3px; margin: 0px; border: 0px; width: !important;　/****兼容Firefox浏览器*****/ width: 100%; font-weight: normal; font-family:宋体; font-size: 12px; color: #fff; background: #A6A9AE; text-align: left; } #rightbox dd { padding: 5px !important;　/****兼容Firefox浏览器*****/ padding: 10px; margin: 0px; border: 0px; text-align: left; width: !important;　/****兼容Firefox浏览器*****/ width: 100%; font-weight: normal; font-family:宋体; font-size: 12px; line-height: 24px; }

　访问下郊果，正常的了！

　　　　

调整前的效果　　　　　　　　　用width: !important后的效果

　　查看Firefox的Iavascript控制台，可看到以下一些提示，说明用CSS中用 !important提升指定样式规则的应用优先权后，Opera和Firefox中会优先执行并丢弃后面相同的定义：

Firefox的Iavascript控制台提示信息： 错误： 预期为 ’:’ 但却得到 ’padding’。 声明被丢弃。 源文件：　　行：71 …… 错误： 预期为 ’:’ 但却得到 ’width’。 声明被丢弃。 源文件：　行：212