CSS：IE，Chrome，Firefox兼容性和CSS Hack(转载)
原作者：微米博客
以前写过一篇关于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
{
}
}
注意事项：
浏览器对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">
<!--
#test,#note{
margin:0 auto;
text-align:center;
}
#test {
width:200px;
height:30px;
border: 1px solid #000000;
color:#fff;
line-height:30px;
}
.color{
/*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
* /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
}
-->
</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兼容模式，保证页面完整展示。
CSS：IE，Chrome，Firefox兼容性和CSS Hack(转载)的更多相关文章
- 针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack
Firefox的CSSHack 只在Firefox上应用的CSS Hack,虽然这种情况非常少,但有时也会碰到: @-moz-document url-prefix() { .cssSelector ...
- CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法
css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px; /*ff的属性*/margin-bottom:140px\9; /* IE6 ...
- CSS HACK区别IE6、IE7、IE8、Firefox兼容性
相信不少人,都特别清楚CSS HACK,而其中也是区别IE6.IE7.IE8.Firefox兼容性问题用的,CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样. ...
- CSS对浏览器的兼容性(IE和Firefox)技巧整理
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
- CSS区分Chrome和Firefox
CSS区分Chrome和FireFox 描述:由于Chrome和Firefox浏览器内核不同,对CSS解析有差别,因此常会有在两个浏览器中显示效果不同的问题出现,解决办法如下: /*Chrome*/ ...
- CSS对浏览器的兼容性常见处理方式小结
CSS技巧 1.div的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了. 缺点:要控制内 ...
- 高效CSS書寫規範及CSS兼容性
一.選擇器針對性說明 某一元素的多个规则集中,选择器的针对性越高,该规则集的权重也就越高.针对性相同的,后出现的规则集的权重更高. * {} /* a=0 b=0 c=0 d=0 -> spec ...
- CSS兼容IE Firefox问题与解决方法
一.双边距问题浮动元素的外边距会加倍,但与第一个浮动元素相邻的其他浮动元素外边距不会加倍.解决方法:在此浮动元素增加样式 display:inline; 二.图片产生的间隙父元素直接包含<im ...
- marquee标签跑马灯连续无空白播放效果 纯CSS（chrome opera有效）
marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...
随机推荐
- UVA 177 PaperFolding 折纸痕 （分形，递归）
著名的折纸问题:给你一张很大的纸,对折以后再对折,再对折……每次对折都是从右往左折,因此在折了很多次以后,原先的大纸会变成一个窄窄的纸条.现在把这个纸条沿着折纸的痕迹打开,每次都只打开“一半”,即把每 ...
- ArrayList 源码分析（JDK1.8）
ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess ...
- Happy Equation
Source: The 10th Shandong Provincial Collegiate Programming Contest 题解: 因为2^p为偶数,所以a,x的奇偶性相同 1.当a为奇数 ...
- 完整的.h宏定义
##封装中的要点 __declspec(dllexport) 表明函数为导出函数 * `extern "C"` 导出的函数名与声明一致,否则导出函数名无法正常使用 当然,也可以通过 ...
- java,编写一个从1循环到150并在每行打印一个值，另外在每个3的倍数行上打印出foo，在每个5的倍数行上打印biz，在每个7的倍数上打印baz.
需求:编写一个从1循环到150并在每行打印一个值,另外在每个3的倍数行上打印出foo,在每个5的倍数行上打印biz,在每个7的倍数上打印baz. package study01; public cla ...
- 利用ss5服务搭建代理服务器
利用ss5服务搭建代理服务器 1. 下载ss5-3.8.9-8.tar.gz ###官网下载http://ss5.sourceforge.net/ 2. 安装ss5 yum -y install gc ...
- python3.7 内置函数整理
#!/usr/bin/env python __author__ = "lrtao2010" #python3.7 内置函数整理 #abs(x) #返回数字的绝对值. 参数可以是整 ...
- LeetCode（225） Implement Stack using Queues
题目 Implement the following operations of a stack using queues. push(x) – Push element x onto stack. ...
- LeetCode（168） Excel Sheet Column Title
题目 Given a positive integer, return its corresponding column title as appear in an Excel sheet. For ...
- 【HIHOCODER 1055】 刷油漆（树上背包）
描述 小Ho有着一棵灰常好玩的树玩具!这棵树玩具是由N个小球和N-1根木棍拼凑而成,这N个小球都被小Ho标上了不同的数字,并且这些数字都是处于1..N的范围之内,每根木棍都连接着两个不同的小球,并且保 ...