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的支持、解析不一样,导致在不同浏览器的环境中呈...
  • freshlover
  • freshlover
  • 2013年09月28日 15:57
  • 168788

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

原文:http://www.kwstu.com/Admin/ViewArticle/201409011604277330 CSS hack大全&详解(什么是CSS hack) 1、什么是C...
  • liu_rong_fei
  • liu_rong_fei
  • 2016年06月01日 13:57
  • 471709

常用的CSS Hack

  不同的浏览器对CSS Hack的识别各异,可以据此来为不同的浏览器设定不同的CSS属性,解决很多兼容性问题!    目前的主要的浏览器版本一般为IE6、IE7、IE8、Firefox,因此主要是...
  • boral_li
  • boral_li
  • 2009年05月03日 21:07
  • 1240

针对IE浏览器单独写CSS样式的几种方法

IE浏览器单独写CSS样式的几种方法1.CSS Hack 举例如下:.box { background: gray; /* 基本的 */ background: pink\9; ...
  • sheng6110
  • sheng6110
  • 2016年04月07日 13:49
  • 6702

CSS HACK

这次说一下css的hack前两天出来个新闻,淘宝将不再支持ie6、7。不得不说这是一个非常好的消息,为web开发行业树立了一个标杆,让我们众多前端开发工程狮们不用再为ie6、7来抓狂了。而且随着移动互...
  • yc123h
  • yc123h
  • 2016年05月07日 13:12
  • 607

div+css学习资料+各种效果,200多个实例

  • 2013年01月23日 16:53
  • 2.37MB
  • 下载

浅谈各种浏览器下的CSS Hack兼容性写法

这篇文章主要介绍了各种浏览器下的CSS Hack兼容性写法,CSS Hack大致可以分为内部Hack和选择器Hack以及HTML头部引用Hack,需要的朋友可以参考下。 由于不同浏览器所遵循的标...
  • Denghejing
  • Denghejing
  • 2016年10月13日 11:09
  • 1602

ie6、7、8、9单独hack兼容写法

styletypestyletype=”text/CSS”>  #body{   border:2pxsolid#00f;/*Firefox的属性*/   border:2pxsolid#090\9;...
  • kongjiea
  • kongjiea
  • 2014年10月13日 11:06
  • 3584

常用的CSS Hack技术集锦

来源:http://www.ido321.com/938.html 一、什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS ...
  • u011043843
  • u011043843
  • 2014年10月11日 00:13
  • 1106

CSS HACK

不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们...
  • honglei_zh
  • honglei_zh
  • 2013年11月04日 00:46
  • 1481
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS样式常用的兼容hack写法
举报原因:
原因补充:

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