首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

CSS常用hack技巧

2012年10月16日 发布 阅读(479) 作者:懒炖

在当前的WEB前端页面制作中,鉴于市面上浏览器种类繁多(IE6-IE9、firefox、Chrome、Safari、Opera等等),各种浏览器对CSS的解析效果会有所不同(少数),所以要想让页面完全的兼容所有浏览器,就必须要用css hack。可能不同的开发人员,使用的hack方式不一样,但最终的目的都是希望各种浏览器渲染出同样的页面效果。

下面对常用的CSS HACK方法做了下收集总结,希望对大家有所帮助,当然也欢迎指正或补充:

1、针对IE的if条件注释hack

了解下if IE的一些语法词:

lte:Less than or equal to的简写,小于或等于;
lt :Less than的简写,小于;
gte:Greater than or equal to的简写,大于或等于;
gt :Greater than的简写,大于;
! :不等于的意思。

利用if IE可以判断css、js或其他任何标签,本站就使用了if IE hack来兼容IE浏览器的,如:

  1. <!--[if lt IE 9]><script src="http://www.cnf2e.com/wp-content/themes/jerman-cnf2e/js/html5.js" type="text/javascript"></script><![endif]-->
  2. <!--[if IE 6]>
  3. <script src="http://www.cnf2e.com/wp-content/themes/jerman-cnf2e/js/DD_belatedPNG_0.0.8a.js"></script>
  4. <script>DD_belatedPNG.fix(".j_container,.j_aside,.j_pages,.post,.single_comments");</script>
  5. <![endif]-->

2、!important

IE6是支持!important的,但是有个小bug,就是当使用!important后,如果后面的样式属性名有重复则会忽略!important,IE7修复了这个问题!
如:

  1. .text{ color:red!important; color:green; }/*IE6下是绿色,IE7、FF、OP等显示红色文字*/

3、选择器hack(selector hacks)和CSS属性hack(css attribute hacks)

转载了一老外的代码,总结的比较全面,原文中有些不正确的地方已经删除或更正,如还有错误,欢迎指正。(原文:http://paulirish.com/2009/browser-specific-css-hacks/)代码如下:

选择器hacks
  1. html,
  2. body {
  3. color: #333;
  4. background: #fff;
  5. font-family: 'Microsoft YaHei,微软雅黑,MicrosoftJhengHei,华文细黑,STHeiti,MingLiu';
  6. font-size: 14px;
  7. min-width: 800px;
  8. height: 100%;
  9. }
  10. a {
  11. color: #333;
  12. }
  13. hr {
  14. display: block;
  15. height: 1px;
  16. background: #ddd;
  17. border: none;
  18. margin: 15px 0;
  19. overflow: hidden;
  20. }
  21. .g-main {
  22. width: 640px;
  23. margin: 0 auto;
  24. padding: 100px 50px 50px;
  25. }
  26. /* IE6 及以下*/
  27. * html #uno { color: red }
  28. /* IE7 */
  29. *:first-child+html #dos { color: red }
  30. *+html #dieciocho { color: red }
  31. /* IE7以上, Firefox, Chrome, Safar, Opera(除IE6外) */
  32. html>body #tres { color: red }
  33. /* IE8以上, Firefox, Chrome, Safar, Opera (除了IE6,IE7) */
  34. html>/**/body #cuatro { color: red }
  35. /* Opera 9.27及以下, safari 2 */
  36. html:first-child #cinco { color: red }
  37. /* Safari 2-3 */
  38. html[xmlns*=""] body:last-child #seis { color: red }
  39. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  40. body:nth-of-type(1) #siete { color: red }
  41. /* IE9, safari 3+, chrome 1+, opera9+, firefox 3.5+ */
  42. body:first-of-type #ocho { color: red }
  43. /* safari3+, chrome1+ */
  44. @media screen and (-webkit-min-device-pixel-ratio:0) {
  45. #diez { color: red }
  46. }
  47. /* iPhone / mobile webkit */
  48. @media screen and (max-device-width: 480px) {
  49. #veintiseis { color: red }
  50. }
  51. /* Safari 2 - 3.1 */
  52. html[xmlns*=""]:root #trece { color: red }
  53. /* Safari 2 - 3.1, Opera 9.25 */
  54. *|html[xmlns*=""] #catorce { color: red }
  55. /* 所有浏览器 除了IE6-8 */
  56. :root *> #quince { color: red }
  57. /* Firefox only. 1+ */
  58. #veinticuatro, x:-moz-any-link { color: red }
  59. /* Firefox 3.0+ */
  60. #veinticinco, x:-moz-any-link, x:default { color: red }
  61. /* FF 3.5+ */
  62. body:not(:-moz-handler-blocked) #cuarenta { color: red; }
CSS属性hacks
  1. /* IE6 */
  2. #once { _color: blue }
  3. /* IE6, IE7 */
  4. #doce { *color: blue; /* or #color: blue */ }
  5. /* IE6, IE7, IE8, (IE9有部分不支持)*/
  6. #diecinueve { color: blue\9; }
  7. /* IE7, IE8, IE9 */
  8. #veinte { color/*\**/: blue\9; }
  9. /* IE6, IE7 -- acts as an !important */
  10. #veintesiete { color: blue !ie; } /* "!"号后面可以是任何字符 */
  11. /* IE8, IE9 */
  12. #anotherone {color: blue\0/;} /* 必须放在每条CSS语句的结尾 */

上面CSS HACK都经过了浏览器测试,可放心使用。

针对IE8,没有单独的应用它的CSS HACK,我们可以在中加上如下

标签,把IE8变成IE7使用就好了

  1. <meta http-equiv="x-ua-compatible" content="ie=7" />
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • 批量转换LF和CRLF的小技巧

    做跨平台开发移植的时候,最常见的问题就是不同操作系统的换行不同(例如,Windows 上是 CRLF,而 Linux 上是 LF,MacOS 以前是 CR,现在也是 LF),如果不注意的话,可能会导致编译的时候报诡异的错误,虽然说有些优秀的文本工具(notepad++, vscode 等)可以自动转换,但是它们都没有提供批量转换的方法,所以一旦遇到有成百上千个的文件需要转换,那么一个个手动去转明显效率低下。虽然网上提到批量转换的文章很多,但是感觉都没有介绍清楚,可能大神们都觉得太简单了吧。。。为了同学们能够和我一样少走弯路,我就把我的转换过程详细记录下来。

    发布:2019-05-24 阅读(107)

  • 关于JS和CSS的两个调查网站

    javascript年度调查已经执行了两三年,css调查刚刚才开始。通过这些调查, 我们可以了解到现在关注度最高的js\css是什么

    发布:2019-03-05 阅读(244)

  • Css Grid fr单位

    css fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

    发布:2019-02-28 阅读(308)

  • CSS Grid网格布局指南(学习)

    CSS网格布局是CSS中最强大的布局系统。它是一个二维系统,这意味着它可以处理列和行,不像flexbox主要是一维系统。CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。

    发布:2019-02-28 阅读(302)

  • 什么是Sass,SCSS与它是什么关系?

    什么是Sass,SCSS与它是什么关系?

    发布:2019-02-26 阅读(288)

  • css3 自定义浏览器滚动条(scrollbar)

    通过-webkit-scrollbar自定义浏览器滚动条,支持webkit的浏览器可正常显示(如chrome,safari,QQ浏览器,360极速等)

    发布:2019-01-28 阅读(288)

  • CSS中伪类和伪元素总结

    css伪类和伪元素有什么区别?

    发布:2019-01-14 阅读(243)

  • 妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

    CSS3实现滚动边框,渐变边框

    发布:2018-12-07 来源:张鑫旭

  • CSS3 手册

    CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀(vendor-prefixed),应避免在生产环境中使用,或极其谨慎地使用,因为将来它们的语法和语义都有可能被更改。

    发布:2018-11-06 来源:mozilla

  • 利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8

    css设置子元素半透明,兼容IE6-8

    发布:2013-05-28 阅读(319)