您的位置：首页 > Web前端 > CSS

CSS：IE，Chrome，Firefox兼容性和CSS Hack

2013-03-24 13:12 337 查看

以前写过一篇关于CSS hack的文章，但近期回头看了看发现理解的不够深刻，总结的也不凝练，于是今天重新测试从新写一篇。常用的CSS
hack如下（笔者只对IE&FF&Chrome进行了测试）。
hack列表（全部经笔者测试，且均为标准模式下，混杂模式由于很少会用到所以未对其进行测试）：

其中粉红色部分为属性hack，黄色部分为选择器hack，它们可以结合使用。此外Firefox和Chrome也有它们专有的hack，详细hack方式及使
用示例如下：
Firefox：
@-moz-document url-prefix() /*写在选择器外层时（只可写在此处）：Firefox only*/
Chrome：
@media screen and (-webkit-min-device-pixel-ratio:0) /*写在选择器外层时（只可写在此处）：Chrome only*/
使用示例-写在选择器前面：

@-moz-document url-prefix() /*Firefox*/
{
body
{
background-color:pink;
}
}
注意事项：
浏览器对css的解析是从前到后的，并且采用最后一个样式声明。
原作者：微米博客
还是不知道怎么区分.好吧,来看个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>区别IE6、IE7、IE8、FireFox的CSS hack - http://www.52css.com%3c/title>

<style type="text/css">



</style>

</head>
<body>

<div id="test" class="color">测试方块 www.mycsu.net </div>
<div id="note">

    <strong style="color:#009933">IE6</strong>

    <strong style="color:#0066FF">IE7</strong>

    <strong style="color:#FF0000">IE8</strong>

    <strong style="color:#CC00FF">FireFox</strong>

</div>

</body>

</html>
---------------------------------------------------------------------------------------------------
background: red;       /* 对FF Opera和Safari有效 */

#background: blue;      /* 对 IE6 和 IE7有效 */

_background: green;      /* 只对IE6有效 */

/*/background: orange;*/      /** 只对IE8有效 **/
!important         /*FF、IE7有效*/
*         /*IE都有效*/
============================================================
IE8是可以和IE7兼容的，简单一行代码，让IE8自动调用IE7的渲染模式

只需要在页面中加入如下HTTP meta-tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

只要IE8读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。

作者：幸福的笨笨熊
　　　　
出处：http://www.cnblogs.com/wuchao/
　　　　
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航