艾斯博弈

学习,工作中的一些记忆

CSS样式常用的兼容hack写法

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

 

如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有效等等

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq443068902/article/details/48651031
个人分类: CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭