css hack

最新推荐文章于 2024-04-08 10:49:03 发布
最新推荐文章于 2024-04-08 10:49:03 发布
阅读量426 收藏
点赞数
分类专栏： 前端 文章标签： 前端 css

人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。

css hack

在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：

  1. 权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码
  2. 可维护：在资源成本和完美间平衡的向后兼容
  3. 可读：省力、易记

这里把成本放在了第一位，并不是说我们不愿意追求完美，而只是，太刻意追求完美有时候可能会阻碍我们前进；在成本后，应该是可维护和可读，这点对于团队的合作来说至关重要，而最终结果也是为了减少成本。

先把这三个原则存起来，来看看我们平时解决兼容的写法（后面会附详细的Hack方法列表）：

一、CSS 选择器 Hack

 
 
  1. /* Opera */ 
  2. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) 
  3. {head~body .sofish{display:block;}} 

这种写法的优缺点是：

  • 优点：全面，各种HACK都有；清理无用代码里易认
  • 缺点：选择器名称不易记；代码量多（要重复写选择器）

二、CSS 属性 Hack

 
 
  1. .sofish{ 
  2.         padding:10px; 
  3.         padding:9px9; /* all ie */ 
  4.         padding:8px0; /* ie8-9 */ 
  5.         *padding:5px; /* ie6-7 */ 
  6.         +padding:7px; /* ie7 */ 
  7.         _padding:6px; /* ie6 */ 
  8. } 

这种写法的优缺点是：

  • 优点：易记；代码少
  • 缺点：不全面

三、IE 注释

 
 
  1. <!--[if IE]>IE only<![endif]-->  
  2. <!--[if !IE]>NOT IE<![endif]-->  

这种写法的优缺点是：

  • 优点：安全；向后兼容好；易维护
  • 缺点：用不好会增加HTTP请求；用得好代码又多

四、浏览器探测：JS/后端程序判断

 
 
  1. // 以jQuery为例，检测是否是IE6，是则加上class="ie6"  
  2. if ($.browser.msie && $.browser.version = 6 ){  
  3.      $('div').addClass('ie6');  
  4. }  

这种写法的优缺点是：

  • 优点：全面；易维护；可读性高
  • 缺点：占资源；代码量大（要重写选择器）

上面4种是我们最常用的方法。现在，让我们抽出心里存着的那3个原则，看看如何选择。要时间思考一下么？这里简单地说一下我的选择：

  1. 尽量使用单独HACK

    这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：_padding:6px;；

  2. 向后兼容的目标：1年

    你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像padding:8px;这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；

  3. 尽可能省资源

    你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。

五、个人推荐写法

其实可以纠结的还真多，这里结合A-Grade浏览器的种类和HACK的种类，写两种个人认为比较合理的HACK和向后兼容相兼顾的写法，仅供大家参考的。

经济实惠型写法：注重单独的HACK。 IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐)

 
 
  1. .sofish{  
  2.         padding:10px; 
  3.         padding:9px9; /* all ie */ 
  4.         padding:8px0; /* ie8-9 目前应用于IE8的单独hack，情况比较少 */ 
  5.         *padding:5px; /* ie6-7 */ 
  6.         +padding:7px; /* ie7 */ 
  7.         _padding:6px; /* ie6 */ 
  8. }  
  9. /* webkit and opera */ 
  10. @media all and (min-width: 0px){ .sofish{padding:11px;} }  
  11. /* webkit */ 
  12. @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } 
  13. /* opera */  
  14. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } 
  15. /* firefox * / 
  16. @-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */  
  17. html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */  

准完美主义写法：配合IE注释，一律采用选择器HACK（选择性推荐）

 
 
  1. HTML: 添加body class  
  2. <!--[if IE6]--><body class="ie6"><![endif]-->  
  3. <!--[if IE7]--><body class="ie7"><![endif]-->  
  4. <!--[if IE8]--><body class="ie8"><![endif]-->  
  5. <!--[if IE9]--><body class="ie9"><![endif]-->  
  6. <!--[if !IE]--><body class="non-ie"><![endif]--> 
 
 
  1. .sofish{padding:10px;}  
  2. .non-ie .sofish{padding:12px;} 
  3. .ie9 .sofish{padding:9px;} 
  4. .ie8 .sofish{padding:8px;} 
  5. .ie7 .sofish{padding:7px;} 
  6. .ie6 .sofish{padding:6px;} 
  7.  
  8. /* webkit and opera */ 
  9. @media all and (min-width: 0px){ .sofish{padding:11px;} }  
  10.  
  11. /* webkit */ 
  12. @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } 
  13.  
  14. /* opera */  
  15. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } 
  16.  
  17. /* firefox * / 
  18. @-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */  
  19. html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */  

然后，从第二种方式我们也可以发现。把IE注释用在body class上，而不是添加单独的<link />或者@import会是更好的选择。虽然分文件也是一种不错的选择，但了为页面加载速度，HTTP请求一个都不能浪费。

至于利用JS或者后端程序来判断，除非你有足够的资源，除非你解决不了（90%不会发生），不然，并不推荐用。附上一个表（via），可以参考参考：

六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：

 
 
  1. /***** Selector Hacks ******/ 
  2. /* IE6 and below */ 
  3. * html #uno  { color: red } 
  4.  
  5. /* IE7 */ 
  6. *:first-child+html #dos { color: red }  
  7.  
  8. /* IE7, FF, Saf, Opera  */ 
  9. html>body #tres { color: red } 
  10.  
  11. /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 
  12. html>/**/body #cuatro { color: red } 
  13.  
  14. /* Opera 9.27 and below, safari 2 */ 
  15. html:first-child #cinco { color: red } 
  16.  
  17. /* Safari 2-3 */ 
  18. html[xmlns*=""] body:last-child #seis { color: red } 
  19.  
  20. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
  21. body:nth-of-type(1) #siete { color: red } 
  22.  
  23. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
  24. body:first-of-type #ocho {  color: red } 
  25.  
  26. /* saf3+, chrome1+ */ 
  27. @media screen and (-webkit-min-device-pixel-ratio:0) { 
  28.         #diez  { color: red  } 
  29. } 
  30.  
  31. /* iPhone / mobile webkit */ 
  32. @media screen and (max-device-width: 480px) { 
  33.         #veintiseis { color: red  } 
  34. } 
  35.  
  36. /* Safari 2 - 3.1 */ 
  37. html[xmlns*=""]:root #trece  { color: red  } 
  38.  
  39. /* Safari 2 - 3.1, Opera 9.25 */ 
  40. *|html[xmlns*=""] #catorce { color: red  } 
  41.  
  42. /* Everything but IE6-8 */ 
  43. :root *> #quince { color: red  } 
  44.  
  45. /* IE7 */ 
  46. *+html #dieciocho {  color: red } 
  47.  
  48. /* Firefox only. 1+ */ 
  49. #veinticuatro,  x:-moz-any-link  { color: red } 
  50.  
  51. /* Firefox 3.0+ */ 
  52. #veinticinco,  x:-moz-any-link, x:default  { color: red  } 
  53.  
  54.  
  55. /***** Attribute Hacks ******/ 
  56. /* IE6 */ 
  57. #once { _color: blue } 
  58.  
  59. /* IE6, IE7 */ 
  60. #doce { *color: blue; /* or #color: blue */ } 
  61.  
  62. /* Everything but IE6 */ 
  63. #diecisiete { color/**/: blue } 
  64.  
  65. /* IE6, IE7, IE8 */ 
  66. #diecinueve { color: blue9; } 
  67.  
  68. /* IE7, IE8 */ 
  69. #veinte { color/***/: blue9; } 
  70.  
  71. /* IE6, IE7 -- acts as an !important */ 
  72. #veintesiete { color: blue !ie; } /* string after ! can be anything */ 

其他的就不多说了。不过，还是要提醒一下: 注释也是很重要的。虽然是HACK了，但现实中情况有时候比想象中的复杂得多，给代码一个注释，好过千言万语。

最后，还是那句，希望看到你更好的方法！

llxjw2011
关注
专栏目录
css hack--浏览器兼容性问题
Ryan的博客
06-12 1572
css hack–浏览器兼容性问题 写css样式的时候，恐怕最头疼的就是各个浏览器下的兼容性问题，即css hack，不同的浏览器对css的解析结果是不同的，因此会导致相同的css输出的页面效果不同，这就需要css hack来解决浏览器局部的兼容性问题。使用css、 hack将会使用你的css代码部分失去作用，然后借助条件样式，使用其原css代码在一些浏览器解析，而css hack代码在符合条件要...
IE Hack兼容性调整
04-26
IE Hack 各种浏览器兼容性调整办法 IE6 IE7 IE8 IE9
[转]说说CSS Hack 和向后兼容
aidenliu的专栏
07-17 506
<br /><br />人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。<br /><br />在解决兼容方法上，想定出一个统一的规范，个人认为应
CSS Hack (各个浏览器兼容的问题)
热门推荐
albert的专栏
09-23 1万+
写css样式的时候，恐怕最头疼的就是各个浏览器下的兼容性问题，即css hack，明明感觉应该是对的，但是就是出不来效果，我根据平时所接触的，总结一下关于兼容 性的技巧，希望可以对大家有所帮助…… CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 　　CSS Hack大致有3种表
CSS样式常用的兼容hack写法
艾斯博弈
09-22 1938
虽然现在低版本的浏览器不再推荐使用，但是国内仍然避免不了一大群人在依旧坚持使用。   如IE6 .bg{ background:#ccc; _background:#bbb;/*兼容ie6的写法*/ } 此顺序不可乱，正常的写在前面，hack写法在后面； 以下是摘抄过来的： （1）方式一 条件注释法 只在IE下生效 这段文字只在IE浏览器显示
hack使用（搭配一些常见兼容）
weixin_34381687的博客
12-12 278
第一段 选择器前缀法(即选择器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有效@m...
css safari浏览器识别CSS hack.docx
11-24
在网页设计和开发中，CSS Hack常常用于解决不同浏览器对CSS样式解析的差异问题。本文主要探讨了如何针对Safari浏览器进行CSS Hack，以便在不同的浏览器环境下实现样式的一致性。 首先，我们要明白CSS Hack的基本...
css hack总结 图片整理版
09-25
CSS Hack，全称为“CSS Hack技巧”，是一种针对不同浏览器对CSS样式解析差异而采取的解决策略。由于历史原因，尤其是Internet Explorer（IE）的不同版本在处理CSS时存在诸多不一致，开发者常常需要使用特定的语法...
CSS教程之通用的css hack简介
09-25
### CSS教程之通用的CSS Hack简介 #### 一、引言 随着Web技术的发展与浏览器种类的增多，兼容性问题成为前端开发人员面临的一大挑战。为了解决不同浏览器对CSS支持程度不一的问题，开发者们发明了各种CSS Hack技巧...
CSS hack总结
qq_37555524的博客
09-20 134
css hack是指各个浏览器及其版本对css解析后生成效果差异。 css hack主要解决浏览器有IE6、IE7、IE8、chrome、Firefox、Safari、Opera，其他浏览器就不用解决...
最全面、最简要的CSS Hack总汇（网上收集）
shadowno的专栏
03-31 714
<br /> <br />前几天，我自己心血来潮，写了一篇《CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳》的文章，后来在网上看到了一篇也是写CSS Hack的文章，看了之后发现自己水平太一般了。这篇文章启发我们CSS hack的写法并不只局限于CSS属性里、CSS选择器里，还在于CSS注释方法、Javascript识别调用方法里边，看了之后让我大开眼界，这应该是我在网上百度这么多CSS Hack文章以来最全面、最简要、最好的一篇，大家一定要好好
浏览器默认的最小字体是12px、如何设置比12px小的字体
keelel的博客
04-19 1622
浏览器默认的最小字体是12px 如何设置6px的字体
CSS :has伪类
橘猫吃不胖的博客
11-13 8210
CSS :has伪类 1 概述 2 实例说明 2.1 表单元素前面加* 2.2 拖拽列表 2.3 多层级hover 2.4 评星组件 3 兼容性
CSS3新增的has伪类选择器，让你能轻松选择父元素
商务合作 / 项目定制开发 / 前端一对一培训、答疑
01-01 4140
可以将其当做父级选择器。，但是大部分浏览器不支持。及以上，火狐目前都不支持。
2021-07-20
qq_45632082的博客
07-20 176
前端自学到哪就可以去找工作了 自学前端想找到好的工作，就一定要清楚面试过程中的高频知识点 想自学前端的话可以看看下面资料适不适合你https://pan.baidu.com/s/1XV8WJ-QovSYhNbpWO9-YKw 提取码:841k 难度A： Flex布局 W3cschool 在线网页编辑器 学习CSS布局 CSS Battle 2、JavaScript：这个是重中之重，推荐红宝书-《JavaScript高级程序设计》，书中自有黄金屋，看的时候你会发现有很多东西是看网页或者视频会漏掉的！同样推荐一
CSS浏览器兼容性----Hack
luozc_web的博客
09-22 351
CSS Hack大致有3种表现形式， CSS类内部Hack、 选择器Hack以及HTML头部引用(if IE)Hack， CSS Hack主要针对IE浏览器。 类内部Hack：比如 IE6能识别下划线”“和星号” * “，IE7能识别星号” * “，但不能识别下划线”“，而firefox两个都不能认识。等等 选择器Hack：比如 IE6能识别html .class{}，IE7能识别+htm
css知识点总结
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
04-08 910
特殊动效：过渡transition、变换transform（倾斜skew、平移translate、缩放scale、旋转rotate）、动画animation。特殊效果：渐变、圆角border-radius、文字阴影text-shadow/盒阴影box-shadow、滤镜filter。2、隔墙法：在最后一个浮动标签后，新加一个标签，给其设置clear：both。/* -webkit-:浏览器内核,加上浏览器内核的意义就是兼容 *//* 将对象作为弹性盒子显示 *//* 设置盒子的排列方式 */
【CSS】处理兼容性问题 | CSS Hack | IE
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
02-26 1008
CSS hack 主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。一般来说，只有IE6不支持 !important 所以可以这样因为!important 具有最高优先级，所以此种方式可以区别出来~ （1）IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。这种问题主要就是会把某些元素挤到了第二行。 解决的方式有两个：(2) 行内属性标签，为了设置宽高，我们经常就会设置成display：block,产生IE6双边距bug；解决办法：（
CSS Hack解决浏览器兼容性问题
"本文主要探讨了CSS Hack技术，旨在解决不同浏览器之间的兼容性问题，特别是针对IE6、IE7和IE8以及Firefox等浏览器。通过使用特定的CSS语法，我们可以确保样式在各种浏览器中正确显示。" 在网页设计中，CSS（层叠...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值