浏览器的兼容
分享一些css有关处理浏览器兼容问题上的小技巧
2008年09月16日 星期二 13:28
A: IE6/IE7 div等块对象默认具有高度
下面图A是IE6里的一个div, 宽度是420px,没有设置高度, 其在IE6/IE7浏览器里,默认DIV具有了一个br的高度,图B是在firefox2.0下显示,div无高度。这样就给我们设计师在实际制作过程当中带来问题，因为有的时候我们要设置一个div高度为5px，用于放置一张背景图片，在IE6里就会有问题。IE6的显示保持在了最低高度一个br，如图c，在同样设置height:5px;情况下，上面是firefox显示下面是IE6。解决的方法是在div里设置一下line-height:0px;
图A
图B
图C
B: IE6下块对象默认的3PX现象
如图，上面是IE6.0里的显示，下面是IE7.0和firefox2.0,红色div设置为float:left;图片在宽度正好的情况下，在IE7和firefox下可以上去，而在IE6里面就被显示在了第二行。这就是IE6的著名的3px现象，当一个对象设置为左悬浮，这个 块对像跟它右边浮上来的对象默认具有3px的margin, 解决的方法是针对于IE6，在css里写一个css hack, 如在左边的div上加：margin-right:0px!important;margin-right:-3px;!important这个标记IE7和firefox是支持的，而我们伟大的IE6却视而不见，我们就可以根据这个特点，让左div针对IE6有一个-3px的右margin,而IE7和firefox为0。
有兴趣的可以拷贝下面代码自己请手去试一下:(考虑在blog里显示的问题，下面代码人为增加了一些空格，请copy的时候自行删去)
< div style=”width:502px;height:80px;border:1px solid #000;”>< div style=”width:250px;background-color:#ff0000;height:60px;float:left;margin-right:0!important;margin-right:-3px;”>< /div>img< /div >
C: 图层float实现页面布局，遇到的浏览器问题
这是我在具体做项目时实际遇到的问题，解决这个问题的思路和方法来自GL的支持，我把它整理出来分享，希望能给你有所帮助。
看下面图1，现在一共有divA, divB, divC, divD, divE这么５个div, 目标是让divD和divE移上去，跟divA其行显示，达到图２的效果。我在当时实现的时候，在divA,divB,divC里分别加上style=”float:left;clear:both”,这样在IE6和IE7里实现了图2的效果，但在firefox里就出现了图3的显示，我在当时试过很多方法, 如在div4里写float:right;让div4有悬浮，想让它上去，这样只能跟divC并列显示。对css感兴趣的人可以先自己试试，其实方法很是简单，给div4和div5分别设置个左边距如margin-left:380px;就解决了。这个例子解决起来其实很简单，这里是提供一种解决css兼容问题上的一种思路。
图1
图2
图3
D: 如何让图片在div里左右居中，上下居中
如下图1， 我们要让图片在IE6，IE7和firefox下图片相对div左右居中，上下居中来显示如图2
，这是众多设计师可能都要面对要解决的问题，因为这种方式我们经常要用到。这里把解决的方法分享给大家，要想让图片左右对齐，我们可以在div里写入”style:text-align:center;”,左右居中问题好解决，现在看一下，IE6,IE7和firefox里，图片都已经是左右居中了，技术的难点是如何让图片在三个浏览器垂直居中。大部分人可能会考虑使用vertical-align:middle来使图片居中，加上去看看没有出现效果，这里我们针对图片设置如下代码：style=”_margin-top: e-xpression(( 300 - this.height ) / 2);发现在IE6下效果实现了，再看看IE7和firefox, 没有变化，这里我们针对IE7和firefox来设置，在div里写入line-height:300px;vertical-align:middle,发现IE7这时候也有效果了，这里的line-height:300px;是根据div的高度定的，如果div的高度为100px,则这里设置line-height:100px,这里我们设置为300px。那么，这时候IE解决了，看一下firefox图片还没垂直居中，再对div增加样式:display:table-cell,现在再看看firefox也好了。
图1
图2
参考代码：
< div style=”width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
< img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: e-xpression(( 300 - this.height ) / 2);” />
< /div >
E: IE捉迷藏现象
捉迷藏问题是IE非常典型的对css支持上的bug, 问题主要出现在IE6浏览器。当div嵌套结构稍微复杂时，就会出现捉迷藏情况。如下面例子：
起初我们写上比较简单的结构代码，如下：
上面代码非常简单，现在我们在里面尝试增加一些内容：
为了让bug显示，我们给上面的xhtml写上css样式，如下：
然后我们到IE7.0 firefox里先后去预览一下，显示一切正常，如下图1。
图1
我们再到IE6去打开它，发现在刚刚打开的时候，看到如下图2的情况，右侧的内容奇怪的消失了。全选页面内容，发现右侧内容是存在的，如果用鼠标移到链接上面，右侧的内容又跑了出来，这就是IE6著名的捉迷藏现象。不仅在目前事例中，在其他情况下也可能出现。造成这种现象的具体触发机制目前还不能合理的归类，至今为止，这种情况只在IE6下出现。
图2
解决这个问题的方法，可以参考https://www.wendangku.net/doc/ee10852954.html,的网站专家给出的一些建议：
a: 在代码的下面使用一个带有< div style=”clear:both;”>< /div >这样的div来清除悬浮
b: 如果有可能，给layout对象设定width和height
c: 可以尝试给layout和left对象使用position:relative
d: 对layout使用line-height属性，强制浏览器对内容文字进行行距调整。
以上是提供解决浏览器问题的一些技巧，https://www.wendangku.net/doc/ee10852954.html,网站专家的建议，更重要的是要
养成良好的编码习惯来预防捉迷藏情况的发生。
一些问题是浏览器自身的问题，遇到问题发生无法避免的情况下，那就要考虑使用一些css hack了，以下是针对IE6,IE7和firefox可以使用的一些css hack:
a: 针对区别IE6 和IE7/firefox, 可以在要区别的代码后面跟上!important
b:针对IE7/firefox 在css的前面加 [xmlns], 如下面的left属性，如果我想要只针对IE7/firefox起作用，写法如下：
[xmlns] #left {
float:left;
border:4px solid #999;
padding:5px;
width:200px;
height:200px;
}
c: 只针对IE6起作用，可以在css前面加* html,如:
* html #left {
clear:both;
}
d: 只针对IE7起作用，在css里前面加*+html,如:
*+html #left {
clear:both;
}
方法二：
下面列出了各种浏览器兼容性问题，写css的时候可以参考。
1、仅IE7与IE5.0可以识别
*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别
*+html select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别
* html select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
4、html/**/ >body select {…}
这句与上一句的作用相同。
5、仅IE6不识别，屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
7、仅IE5不识别，屏蔽IE5
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。
8、盒模型解决方法
selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
9、只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
1. 区别FF和IE
1-1
首先，当然是!important大法，可以提升指定样式规则的应用优先权，如下面的例子：
插入代码：
div{
background-color: red !important;
background-color: blue;
}
因为!important声明在IE6中并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”
；而在FF中背景色的值为“red”。
1-2
还有一种方法，就是IE浏览器可以识别“>”等一些符号，如“~”、“`”、“<”等，都只有IE可以识别，但是不合理，!important是符合标准的。所以
插入代码：
div{
background-color: red;
>background-color: blue;
}
在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“>”，则应该得到的蓝色的背景，因此可以知道“>”只有IE可以识别。
这样，我们就可以把FF和IE的样式分离开。下面就是解决IE自己的问题了。
2. 区别IE5.5和IE的其他版本
看一个例子：
插入代码：
div{
>background-color: black;
>background-color /*IE5.5*/: green;
}
这个例子使用了“>”，只有IE可以识别，在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。
到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了。
3. 区别IE5与IE5.5+
插入代码：
div{
>background-color: red;
}
div/*IE5.5+*/{
>background-color: black;
}
这里我们又用到一个HACK，就是“div/**/{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；在IE5以上版本中得到的是黑色背景。
4. 完整的Hack
这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：
插入代码：
div{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
div/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”，因为“div/**/{}”这个HACK在FF中可以识别。