资讯专栏INFORMATION COLUMN

CSS HACK

chanthuang / 926人阅读

摘要:主要分为选择器属性条件注释和判断各有优缺点,不必纠结于某一方式,具体问题具体分析。以下测试结果是在位系统,默认浏览器,使用下的浏览器模式,使用绿色版浏览器,使用,使用,,,进行测试的。如果有什么错误,请指正浏览器加粗表示支持

各种各样的浏览器,曾经的CSS HACK现在还能HACK吗?

chensy收集了网上一些常见的HACK,在各大浏览器上作了测试,来看看他在博客上的分享吧。


HACK主要分为CSS选择器HACK、CSS属性HACK、IE条件注释HACK和JS判断HACK;各有优缺点,不必纠结于某一方式,具体问题具体分析。这里主要记录的是CSS选择器和属性HACK。

以下测试结果是在:Win7 64位系统,默认IE10浏览器,使用IE10下的IE789浏览器模式,使用IE6绿色版浏览器,使用Opera 12.15,使用Firefox 21,Safari 4,Google Chrome 28,进行测试的。如果有什么错误,请指正!

浏览器(加粗表示支持) CSS hack
IE6 _background-color:#38DB24;
IE67 *background-color:#38DB24 ;
IE67 +background-color:#38DB24 ;
IE67 #background-color:#38DB24;
IE67 background-color:#38DB24 !ie;
IE678910 background-color:#38DB249;
IE78910&Firefox&Opera&Chrome&Safari html>body .ie78910-all-hack { background-color: #38DB24 }
IE8910&Firefox&Opera&Chrome&Safari html>/**/body .ie8910-all-hack { background-color: #38DB24 }
IE8910&Opera background-color:#38DB24;
IE910 :root .ie910-hack { background-color:#38DB249; }
IE910 background-color:#38DB249;
IE910&Firefox&Opera&Chrome&Safari body:nth-of-type(1) .ie910-all-hack {background-color:#38DB24 ;}
IE910&Firefox&Opera&Chrome&Safari @media all and (min-width: 0px) { .ie910-all-2-hack{ background-color:#38DB24 ;} }
IE910&Firefox&Opera&Chrome&Safari @media all and (min-width: 0px) { .ie910-all-3-hack{background-color:#38DB24 ;} }
IE910&Firefox&Opera&Chrome&Safari :root *> .ie910-all-4-hack { background-color:#38DB24 }
IE10 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ie10-hack{background-color:#38DB24 ;} }
Firefox @-moz-document url-prefix() { .firefox-hack{background-color:#38DB24 ;} }
Chrome&Safari @media screen and (-webkit-min-device-pixel-ratio:0) {.chrome-safari-hack{background-color:#38DB24 ;} }

via chensy"s blog

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110852.html

相关文章

  • 前端面试题-CSS Hack

    摘要:实际项目中大部分是针对浏览器不同版本之间的表现差异而引入的。四书写顺序一般是将适用范围广被识别能力强的定义在前面。五条件注释法这种方式是浏览器专有的方式,微软官方推荐使用的方式。 一、CSS Hack的概念 由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面...

    fizz 评论0 收藏0
  • 前端面试题-CSS Hack

    摘要:实际项目中大部分是针对浏览器不同版本之间的表现差异而引入的。四书写顺序一般是将适用范围广被识别能力强的定义在前面。五条件注释法这种方式是浏览器专有的方式,微软官方推荐使用的方式。 一、CSS Hack的概念 由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面...

    2i18ns 评论0 收藏0
  • 前端面试题-CSS Hack

    摘要:实际项目中大部分是针对浏览器不同版本之间的表现差异而引入的。四书写顺序一般是将适用范围广被识别能力强的定义在前面。五条件注释法这种方式是浏览器专有的方式,微软官方推荐使用的方式。 一、CSS Hack的概念 由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面...

    Ryan_Li 评论0 收藏0
  • IE CSS Hack【记录】

    摘要:条件属性选择器一般都是利用各浏览器的支持的能力和来进行的本文只列举了一些常用的,且不考虑以下的版本尽可能减少对的使用,使用会带来维护成本的提高以及浏览器版本变化类似失效等问题条件用于选择及不同版本,及以上版本已将条件注释特性移除  1、条件hack 2、属性hack 3、选择器hack   CSS Hack一般都是利用各浏览器的支持CSS的能力和BUG来进行的 本文只列举了一些常用的CSS ...

    binta 评论0 收藏0
  • 9:浏览器兼容

    摘要:由和开发的浏览器排版引擎,年月发布。浏览器的兼容问题是我们必须去克服的。表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。  9:浏览器兼容 常见的主流浏览器 1)主流浏览器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2)最早的浏览器 : Mosaic ...

    AWang 评论0 收藏0

发表评论

0条评论

chanthuang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<