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

目录

使用 media query 进行 IE 的 CSS Hack

2019年08月07日 转载自 jackpu.com 阅读(71)

原文发布于2017年,过去两年,感觉这种方式挺有意思,转一下


尽管现在很多大多数现代浏览器对 CSS3 的诸多特性已经开始支持了,但是有的时候我们还是避免不了对低版本的 IE 浏览器进行兼容性的样式写法。常见的思路无疑是写注释性语法:

  1. <head>
  2. <!--[if gt IE 9]><!-->
  3. <style>
  4. // your style rule
  5. </style>
  6. <!--<![endif]-->
  7. </head>

关于IE 注释性语句可以看 这里

当然你也可以通过 JS 进行 UA 测判断,然后在 body 加上 ie的 class ,然后在样式里进行限制。

  1. .ie .container{
  2. ....
  3. }

当然今天得重点是通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0,\, 以及 \9,然后结合 media query 可以更好进行样式的区分。

非常常见的,比如我们要在对 css3 不支持的页面比如 IE8, IE6 , IE7 这些浏览器进行样式的区别。

  1. @media \0screen\,screen\9 {
  2. body { background: green; }
  3. }

比如针对 IE9, IE10的 Hack:

  1. @media screen and (min-width:0\0) {
  2. body { background: yellow; }
  3. }

针对 IE8, IE9以及 IE10 的 Hack:

  1. @media screen\0 {
  2. body { background: orange; }
  3. }

如果针对的浏览器只有 IE8 需要 hack:

  1. @media \0screen {
  2. body { background: blue; }
  3. }

演示地址 Codepen

你可以前往这个页面了解更多的支持情况。

r如果我们相对某些 CSS 语法支持的兼容性进行测试的话,我们可以使用 支持 support 语法的浏览器进行兼容性写法:

  1. @supports ( display: flex ) {
  2. .foo { display: flex; }
  3. }

参考

https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/

© 本文著作权归原作者所有 来源:jackpu.com 阅读原文

评论

  •  
  • 使用 media query 进行 IE 的 CSS Hack

    通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0,\, 以及 \9,然后结合 media query 可以更好进行样式的区分

    发布:2019-08-07 阅读(71)

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

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

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

  • 视窗单位vm,vh,vmin,vmax

    记录下响应式布局单位(视窗单位:viewport units)的应用,最近用electron开发桌面应用,用到vh,vw还是蛮方便的.

    发布:2019-01-09 阅读(161)

  • 妙法攻略:渐变虚框及边框滚动动画的纯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