前端浏览器兼容之——css hack
来源:互联网 发布:mysql 并发 version 编辑:程序博客网 时间:2024/06/05 16:59
一般情况下,我们尽量避免使用CSS hack,但是有些情况为了顾及用户体验实现向下兼容,不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染,这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让IE8-的专属hack出马了。
方式一:条件注释法
这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下 只在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]-->
方式二:类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。IE浏览器各版本 CSS hack 对照表
说明:在标准模式中“-″减号是IE6专有的hack“\9″ IE6/IE7/IE8/IE9/IE10都生效“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack“\9\0″ 只对IE9/IE10生效,是IE9/10的hack
demo如下
.hack{ /*注意顺序,否则IE6/7下可能无法正确显示,导致结果显示为白色背景*/ background-color:red; /* All browsers */ background-color:blue !important;/* All browsers but IE6 */ *background-color:black; /* IE6, IE7 */ +background-color:yellow;/* IE6, IE7*/ background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */ background-color:purple\0; /* IE8, IE9, IE10 */ background-color:orange\9\0;/*IE9, IE10*/ _background-color:green; /* Only works in IE6 */ *+background-color:pink; /* WARNING: Only works in IE7 ? Is it right? */ }
方式三:选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在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有效
等等
结合CSS3的一些选择器,如html:first-child,body:nth-of-type(1),衍生出更多的hack方式,具体的可以参考下表:
阅读全文
0 0
- 前端浏览器兼容之——css hack
- 浏览器兼容之CSS Hack
- 浅谈CSS HACK——兼容不同浏览器的CSS
- 浅谈CSS HACK——兼容不同浏览器的CSS
- 浏览器兼容 CSS hack
- CSS hack浏览器兼容一览表
- CSS hack浏览器兼容一览表
- CSS hack浏览器兼容一览表
- CSS hack浏览器兼容一览表
- CSS hack浏览器兼容一览表
- CSS hack浏览器兼容一览表
- 浏览器兼容 4 CSS hack
- CSS 浏览器兼容 hack法
- CSS hack之区别不同浏览器兼容的写法
- CSS之hack与浏览器兼容常用技巧
- 前端之css-Hack
- css hack(CSS多浏览器兼容)
- CSS浏览器兼容(CSS Hack)
- hdu2141 二分查找
- 手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明
- Shell系列—Shell简介
- sql server 时间筛选默认时间
- Ubuntu14.04 opencv2.4.8和opencv3.2多版本共存
- 前端浏览器兼容之——css hack
- 银联POS机的结算过程如何?
- Linux C Socket
- linux搭建Apache+James邮件服务器
- 【tomcat】linux下将tomcat注册到系统服务中
- Java冒泡排序和选择排序
- linux image格式改为srec
- pl/sql中的控制语句应用: if 和else
- JSP隐含对象