针对IE浏览器单独写CSS样式的几种方法

最新推荐文章于 2022-01-11 16:28:32 发布

晨丶曦

最新推荐文章于 2022-01-11 16:28:32 发布

阅读量2w

点赞数 1

分类专栏： HTML5 文章标签： css ie 8 浏览器 ie 7

本文链接：https://blog.csdn.net/sheng6110/article/details/51085305

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

IE浏览器单独写CSS样式的几种方法

1.CSS Hack
举例如下：

.box {  
    background: gray; /* 基本的 */
    background: pink\9; /* IE 8 及低于IE8版本 */
    *background: green; /* IE 7 及低于IE7版本 */
    _background: blue; /* IE 6 */
}

另外网上找到的下面这张表可以很清楚的像大家展示IE各版本的css hack。

这是IE各版本 hack的支持情况的表

这里S代表standard标准模式，Q代表Quirks怪异模式

2.条件注释

<!--[if lt IE 7]>版本小于IE7将看到这行<![endif]-->
<!--[if lte IE 7]>版本小于或等于IE7将看到这行<![endif]-->
<!--[if IE 7]>版本如果是IE7将看到这行<![endif]-->
<!--[if gt IE 7]>版本大于IE7将看到这行<![endif]-->

很明显具体格式是if 运算符 IE 版本号，运算符如果省略将意味着等于，否则请取lt（小于）、gt（大于）、lte（小于或等于）、gte（大于或等于），另外还可以进行感叹号（!）逻辑取非和 | 逻辑或等运算，这个将在第三种方法介绍中给出实例

具体使用在html中这样写：

<!--[if IE 6]>
<style type="text/css">
 /* 针对IE6定义的样式 */
</style>
<![endif]-->

当然除了定义style样式外我们还可以针对不同IE浏览器定义不同的内容，可以是script脚本或者其他显示或隐藏的内容等。

3.条件注释 html 标签

这种方案也是利用条件注释，但并不是对 CSS 使用条件注释，而是对 html 标签使用条件注释，引入不同的 class ，从而区分不同的 IE 以及其他浏览器。例如：

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
<style type="text/css">
.box {
    color: #fff;
    padding: 5px 20px;
    background: gray; 
}
.ie8 .box {
    background: pink;
}
.ie7 .box {
    background: green;
}
.ie6 .box {
    background: blue;
}
</style>
</head>
<body>
<div class="box">
Content here
</div>
</body>
</html>

晨丶曦

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
针对IE浏览器单独写CSS样式的几种方法

IE浏览器单独写CSS样式的几种方法1.CSS Hack 举例如下：.box { background: gray; /* 基本的 */ background: pink\9; /* IE 8 及低于IE8版本 */ *background: green; /* IE 7 及低于IE7版本 */ _background: blue; /* IE 6 */}另外
复制链接

扫一扫

专栏目录