CSS hack

作者: 尚有 | 来源:发表于2018-01-12 11:04 被阅读17次

CSS hack是为了根据不同浏览器或者同一浏览器的兼容或者某些特性引起的页面展示效果不达人愿而使用的一种技术
大致分为三类:
1、选择器前缀法: 例如 IE6能识别div .div{},IE7能识别+div .div{}或者*:first-child+div .div{}。
2、属性前缀法:IE6能识别""和" * ",IE7能识别" * ",但不能识别"",IE6~IE10都认识"\9",但firefo对前述三个都不认识
3、IE条件注释法:,针对IE6及以下版本: 。这类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有效

属性前缀法

编号 hack 例子 适用浏览器
1 * *color IE6 及以下版本 IE7
2 + +color IE6 及以下版本 IE7
3 _ _color IE6 及以下版本
4 - -color IE6 及以下版本
5 # #color IE6-IE10
6 \0 color:#000\0; IE8和IE10
7 \9\0 color:#000\9\0; IE9和IE10
8 \9 color:#000\9; IE6 - IE10

IE条件注释法

主要是针对ie浏览器的,通过判断IE浏览器的版本从而给定样式或者判断条件


img.png

相关文章

  • CSS hack 原理

    参考文章: CSS hack大全&详解(什么是CSS hack) 要点总结: css hack 原理是:依据不同浏...

  • 20-IE6浏览器兼容

    CSS Hack 什么是CSS Hack?针对IE的不同版本设置不同的CSS属性, 我们就称之为CSS Hack ...

  • CSS部分属性的IE兼容

    CSS-Hack 什么是CSS Hack?针对IE的不同版本设置不同的CSS属性, 我们就称之为CSS Hack ...

  • 浏览器兼容

    什么是 CSS hack CSS hack就是使你的CSS代码兼容不同的浏览器。CSS hack大致有3种表现形式...

  • HTML2

    1、ie6png的修复 2、CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件...

  • 前端面试总结(七)

    1.什么是CSS Hack? 一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。IE浏览器Hack...

  • 浏览器兼容

    CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mo...

  • 浏览器兼容简要了解

    CSS HACK CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mo...

  • 浏览器兼容问题

    什么是 CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safar...

  • 浏览器兼容问题

    什么是css hack css hack 由于不同厂商的浏览器,比如Internet Explorer、 Safa...

网友评论

    本文标题:CSS hack

    本文链接:https://www.haomeiwen.com/subject/mkuxoxtx.html