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

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兼容表：

	IE6	IE7	IE8	Firefox	Chrome	Safari
!important		Y		Y
_	Y
*	Y	Y
*+		Y
\9	Y	Y	Y
\0			Y
nth-of-type(1)					Y	Y

#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>

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

相关推荐