做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>
分享到：
相关推荐
尽管IE Tab能够帮助用户解决部分兼容性问题，但并非所有基于IE的网页都能在Chrome的IE内核模式下完美运行。有些网页可能依赖特定的ActiveX控件或其他IE特有的技术，这些在Chrome环境下可能无法支持。此外，由于IE...
"防IE浏览器，支持IE浏览器选择"这部分描述揭示了该插件的一个关键特性，那就是它能够模拟IE浏览器的行为，这对于那些只能在IE环境下正常运行的网页或者应用来说非常重要。用户可以选择以IE内核来渲染网页，即使在...
标题中的“chrome实现ie内核”指的是在Google Chrome浏览器中模拟或使用Internet Explorer（IE）浏览器的内核来运行特定的网页或Web应用程序。这通常是因为一些旧的或企业内部的应用程序依赖于IE的ActiveX技术，而...
标题中的“cookies 查看器 ie friefox chrome”指的是一个工具，它专为Internet Explorer（IE）、Firefox和Chrome这三种主流浏览器设计，用于查看、管理和操作用户的cookies数据。cookies是网站在用户计算机上存储的...
在网页中嵌入Window Media Player（WMP）插件，以支持Internet Explorer（IE）和Google Chrome浏览器，是一项常见的多媒体内容展示技术。由于WMP在现代浏览器中的兼容性问题，尤其是对非IE浏览器的支持，这一过程...
标题中的“谷歌浏览器chrome打开IE页面的插件,亲测可用，20220121”表明这是一个关于Google Chrome浏览器的插件，它的主要功能是能够在Chrome中模拟或调用Internet Explorer（IE）浏览器的功能。这个插件在2022年1月...
js禁止查看源文件屏蔽Ctrl+u_s、F12、右键等兼容IE火狐chrome.zip
标题 "Chrome中链接打开IE窗口插件" 描述的是一个技术解决方案，主要针对那些需要在新版本的前端框架（如Vue）中与旧版项目进行兼容的用户。这个插件允许用户在谷歌浏览器（Chrome）、火狐（Firefox）、360浏览器...
ie tab for chrome
**IE 插件 Chrome Frame 1.2.183.7** IE 插件 Chrome Frame 是一个由谷歌开发的浏览器扩展，旨在提升 Internet Explorer（IE）浏览器的性能和兼容性，特别是在处理现代Web技术如HTML5、CSS3和JavaScript时。这个...
IE Tab插件的功能就是在Chrome浏览器中嵌入IE浏览器的内核，如果用户在用使用Chrome浏览过程中遇到只能兼容IE的网站，用户不需要从新在打开IE浏览器访问，直接使用Google Chrome浏览器同样可以打开访问。 由于目前...
在这个场景下，"谷歌chrome（扩展ie内核 chrome.r39.crx+demo示例）.zip" 文件提供了一个解决方案，允许Chrome浏览器模拟IE内核的行为。 这个压缩包包含了一个名为 "chrome.r39.crx" 的文件，它是一个Chrome浏览器...
Chrome插件IETAB
众所周知，IE浏览器的性能是很差的，特别在使用诸如 WebQQ 2.0 这样的丰富的网页应用时，你就能明显感觉到 IE的内核 和 谷歌浏览器的webkit内核 之间的性能差异了，那么有没办法提高 IE 的性能呢？ Chrome Frame 是...