妙味云课堂之css:兼容的那些事

一. 条件注释语句

判断是ie的那个版本:

<body>
<!--[if IE]>
这是IE
<![endif]-->
<!--[if IE 9]>
9
<![endif]-->
<!--[if IE 8]>
8
<![endif]-->
<!--[if IE 7]>
7
<![endif]-->
<!--[if IE 6]>
6
<![endif]-->
</body>
二. css hack

\9 IE10之前的IE浏览器解析
+,* IE7包括IE7之前的IE浏览器解析
_ IE6包括IE6之前的IE浏览器

.box{ width:100px;height:100px;background:Red;background:blue\9; +background:yellow;_background:green;}
@media screen and (-webkit-min-device-pixel-ratio:0){.box{background:pink}}


三. 样式优先级

!important 提升样式优先级权重

默认样式 < 类型 < class < id < style(行间) < important

IE6下,在important 后边再加一条同样的样式,会破坏掉important的作用,会按照默认的优先级顺序来走

<style>
.box{width:100px;height:100px;background:red !important; background:pink;}
</style>

<div class="box" style="background:#000;"></div>


妙味云课堂之css:兼容的那些事,布布扣,bubuko.com

妙味云课堂之css:兼容的那些事

上一篇:css3彩色进度条


下一篇:jQuery - 添加元素