IE ,Fireox ，Chrome的差别部分摘录

2012-11-22

IE ,Fireox ，Chrome的差异部分摘录做web开发最痛苦的事情莫过于让我们的css和js兼容各个浏览器了。主流的浏

IE ,Fireox ，Chrome的差异部分摘录

做web开发最痛苦的事情莫过于让我们的css和js兼容各个浏览器了。主流的浏览器采用不同的内核（rendering engine 或 layout engine）把我们推向痛苦的深渊。
如使用Gecko的Firefox，使用Trident的IE，使用Webkit的safari和google chrome等。
今天和大家分享一个chrome和ff，ie之间css兼容的小技巧：
1.在ie和ff中，使用如下代码做reset清除padding和margin，在chrome下不起作用：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }

??需要这样写：

* { margin:0; padding:0; }

2:半透明问题：

IE：
filter:alpha(opacity=sqlN)
其中 sqlN的值域为[0, 100]

Firefox：
-moz-opacity:sqlN
其中sqlN的值域为[0, 1]

Chrome和Safari：
opacity:sqlN
其中sqlN的值域为[0, 1]

3。不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：
? 在属性前加下划线(_)，那么此属性只会被IE6解释
? 在属性前加星号(*)，此属性只会被IE7解释
? 在属性值后面加"\9"，表示此属性只会被IE8解释
各浏览器CSS hack兼容表：

?IE6IE7IE8FirefoxChromeSafari!important?Y?Y??_Y?????*YY????*+?Y????\9YYY???\0??Y???nth-of-type(1)????YY

#test{color:red; /* 所有浏览器都支持 */ color:red !important;/* Firefox、IE7支持 */_color:red; /* IE6支持 */*color:red; /* IE6、IE7支持 */*+color:red; /* IE7支持 */color:red\9; /* IE6、IE7、IE8支持 */color:red\0; /* IE8支持 */}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

? 如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：

4. iframe问题

iframe框架内页:

<html><head>    <title>框架内页</title></head><body>    <div>        <input id="txt1" name="txt1" type="text" value="测试" />    </div></body></html>

父窗口：

<iframe name="frame1" id="frame1" src="frm.html" frameborder="1" height="30"></iframe><p>    iframe1中文本框的值:</p><p>    <input type="button" name="Submit" value="getValue" onclick="getValue()" /></p><script type="text/javascript">function getValue(){    var ofrm1 = document.getElementById("frame1").document;        if (ofrm1==undefined)    {        ofrm1 = document.getElementById("frame1").contentWindow.document;        var ff = ofrm1.getElementById("txt1").value;        alert("firefox/chrome取值结果为:" + ff);    }    else    {        var ie = document.frames["frame1"].document.getElementById("txt1").value;        alert("ie取值结果为:" + ie);    } }</script>

热点排行

Web前端

IE ,Fireox ，Chrome的差别部分摘录