CSS样式常用的兼容hack写法

原创 2015年09月22日 10:57:30

虽然现在低版本的浏览器不再推荐使用,但是国内仍然避免不了一大群人在依旧坚持使用。

 

如IE6

.bg{

background:#ccc;

_background:#bbb;/*兼容ie6的写法*/

}

此顺序不可乱,正常的写在前面,hack写法在后面;

以下是摘抄过来的:

(1)方式一 条件注释法
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
(2)方式二 类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。
IE浏览器各版本 CSS hack 对照表
hack
写法
实例
IE6(S)
IE6(Q)
IE7(S)
IE7(Q)
IE8(S)
IE8(Q)
IE9(S)
IE9(Q)
IE10(S)
IE10(Q)
*
*color
青色
Y
Y
Y
Y
N
Y
N
Y
N
Y
+
+color
绿色
Y
Y
Y
Y
N
Y
N
Y
N
Y
-
-color
黄色
Y
Y
N
N
N
N
N
N
N
N
_
_color
蓝色
Y
Y
N
Y
N
Y
N
Y
N
N
#
#color
紫色
Y
Y
Y
Y
N
Y
N
Y
N
Y
\0
color:red\0
红色
N
N
N
N
Y
N
Y
N
Y
N
\9\0
color:red\9\0
粉色
N
N
N
N
N
N
Y
N
Y
N
!important
color:blue !important;color:green;
棕色
N
N
Y
N
Y
N
Y
N
Y
Y
说明:在标准模式中
  • “-″减号是IE6专有的hack
  • “\9″ IE6/IE7/IE8/IE9/IE10都生效
  • “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
  • “\9\0″ 只对IE9/IE10生效,是IE9/10的hack
(3)CSS hack方式三:选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
目前最常见的是
*html *前缀只对IE6生效*+html *+前缀只对IE7生效@media screen\9{...}只对IE6/7生效@media \0screen {body { background: red; }}只对IE8有效@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效@media screen\0 {body { background: green; }} 只对IE8/9/10有效@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

史上最全的CSS hack方式一览

什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈...

CSS hack大全&详解(什么是CSS hack)

原文:http://www.kwstu.com/Admin/ViewArticle/201409011604277330 CSS hack大全&详解(什么是CSS hack) 1、什么是C...

CSS Hack (各个浏览器兼容的问题)

写css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,明明感觉应该是对的,但是就是出不来效果,我根据平时所接触的,总结一下关于兼容 性的技巧,希望可以对大家有所帮助…… C...

SQLServer Stolen内存优化案例

最近开始观察到 SQLServer.exe 进程占用内存过大,已达到了60GB,如图: 然而,SQLServer 限制的最大内存为 55GB:EXEC sp_configure'max server...

Ubuntu 下让sublime-text3支持中文输入法

Ubuntu 下让sublime-text3支持中文输入法 安装fcitx 代码: sudo add-apt-repository ppa:fcitx-team/nightly su...
  • zxzxck
  • zxzxck
  • 2014年08月28日 14:16
  • 656

CSS样式常用兼容属性之日积月累

1.各大浏览求透明度设置 { background:#9567aa; filter:alpha(opacity=60); //IE系列识别 -moz-opacity:0.8; //火狐私有 opac...

CSS Hack 浏览器兼容写法 用法

  • 2012年11月17日 09:51
  • 14KB
  • 下载

2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie7的方...

解决IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法【记录下来,以后可以使用】

解决IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法 2010-08-11 15:28 每次调CSS最令人头痛的就是浏览器校正问题,因为每个浏览器对CSS的解...
  • Vange
  • Vange
  • 2011年09月23日 22:59
  • 1851
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS样式常用的兼容hack写法
举报原因:
原因补充:

(最多只允许输入30个字)