`
ninggy
  • 浏览: 112931 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

IEChromeFirefoxSafariCSS 
阅读更多

做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的网站上添加一行代码即可解决问题，此代码如下：

<meta http-equiv="x-ua-compatible" content="ie=7" />

 

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>

 

 

分享到：
| MapXtreme-4.8.0从mysql中获取经纬度绘制 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics