【IE9/8/7/6/5】RGBA（background-color: rgba(R, G, B, A);）背景透明兼容性（含“条件注释判断浏览器版本”介绍与例子）

最新推荐文章于 2021-04-11 04:48:58 发布

iuukai

最新推荐文章于 2021-04-11 04:48:58 发布

阅读量438

点赞数

分类专栏： ie 兼容性问题积累

本文链接：https://blog.csdn.net/weixin_45389633/article/details/104170857

版权

ie 兼容性问题积累专栏收录该内容

8 篇文章 0 订阅

订阅专栏

关于RGBA的兼容，我百度过后，整理如下（真正的兼容方法在最下面）

在不兼容情况下

RGBA的属性，对于IE8以下是无效的：
在这里插入图片描述

<html>
<head>
<meta charset="utf-8" />
<title>IE8/7/6/5不兼容rgba</title>
<style type="text/css">
.box {
	width: 300px;
	height: 300px;
	border: 2px solid #000;
	float: left;
	margin: 50px;
}

.img {
	width: 300px;
	height: 300px;
	font-size: 20px;
	line-height: 300px;
	text-align: center;
	color: #000;
	background-color: rgba(255, 0, 0, 0.5);
}
</style>
</head>

<body>
	<div class="box">
		<div class="img"></div>
	</div>
</body>
</html>

所以，下面开始介绍各种兼容方法

一、添加IE的filter属性：（兼容IE8以及以下版本，却不兼容IE9）

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fff0000, endColorstr=#7Fff0000);
注释： #7Fff0000。7F 对应RGBA不透明度的值 0.5 ， ff0000 这个就是十六进制颜色值对应 RGB(255, 0, 0)

**RGBA不透明度和IE下filter数值的转换**
rgba	filter
0.1	19
0.2	33
0.3	4C
0.4	66
0.5	7F
0.6	99
0.7	B2
0.8	C8
0.9	E5

在这里插入图片描述

🚫🚫🚫但是！！！你以为可以了？回滚 IE9 版本，发现它却不行了！！！

在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>IE9冲突异常，出错</title>
<style type="text/css">
.box {
	width: 300px;
	height: 300px;
	border: 2px solid #000;
	float: left;
	margin: 50px;
}

.img {
	width: 300px;
	height: 300px;
	font-size: 20px;
	line-height: 300px;
	text-align: center;
	color: #000;
	background-color: rgba(255, 0, 0, 0.5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fff0000, endColorstr=#7Fff0000);
}
</style>
</head>

<body>
	<div class="box">
		<div class="img"></div>
	</div>
</body>
</html>

这是因为：IE9同时支持RGBA和filter，会导致两个重叠，透明效果异常。
所以！你得另外再声明，在IE9版本下，不使用filter属性！或者，只在IE8及以下添加filter属性！
那就要找关于IE版本css的hack了。

二、真正的兼容方法：同时设置IE9的hack（兼容所有IE版本）

先介绍“条件注释判断浏览器版本”，但真正简洁且适合局部兼容的方法放最后。

设置条件注释判断浏览器版本——仅IE9版本才生效

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>[if IE 9]</title>
<style type="text/css">
.box {
	width: 300px;
	height: 300px;
	border: 2px solid #000;
	float: left;
	margin: 50px;
}

.img {
	width: 300px;
	height: 300px;
	font-size: 20px;
	line-height: 300px;
	text-align: center;
	color: #000;
	background-color: rgba(255, 0, 0, 0.5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fff0000, endColorstr=#7Fff0000);
}
</style>
<!--[if IE 9]>
<style type="text/css">
.img {
	filter: none;
}
</style>
<![endif]-->
</head>

<body>
	<div class="box">
		<div class="img"></div>
	</div>
</body>
</html>

设置条件注释判断浏览器版本——仅IE9以下版本才生效（不含IE9）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>[if lt IE 9]</title>
<style type="text/css">
.box {
	width: 300px;
	height: 300px;
	border: 2px solid #000;
	float: left;
	margin: 50px;
}

.img {
	width: 300px;
	height: 300px;
	font-size: 20px;
	line-height: 300px;
	text-align: center;
	color: #000;
	background-color: rgba(255, 0, 0, 0.5);
}
</style>
<!--[if lt IE 9]>
<style type="text/css">
.img {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fff0000, endColorstr=#7Fff0000);
}
</style>
<![endif]-->
</head>

<body>
	<div class="box">
		<div class="img"></div>
	</div>
</body>
</html>

设置条件注释判断浏览器版本——仅IE8及以下版本才生效（含IE8）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>[if lte IE 8]</title>
<style type="text/css">
.box {
	width: 300px;
	height: 300px;
	border: 2px solid #000;
	float: left;
	margin: 50px;
}

.img {
	width: 300px;
	height: 300px;
	font-size: 20px;
	line-height: 300px;
	text-align: center;
	color: #000;
	background-color: rgba(255, 0, 0, 0.5);
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
.img {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fff0000, endColorstr=#7Fff0000);
}
</style>
<![endif]-->
</head>

<body>
	<div class="box">
		<div class="img"></div>
	</div>
</body>
</html>

但是！又来但是了！如果使用条件注释判断浏览器版本来处理这些小细节的兼容，未免太大材小用了！为何？你就这么一条语句的兼容，你花费这么大功夫？还得套一层结构标签？套多一层<style></style>？不麻烦？到时再维护，也会烦死。
所以，条件注释判断浏览器版本，只适合，整套或者大范围的CSS的兼容维护。

条件注释判断浏览器版本
判断符	举例	说明
!	[if !IE]	The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。
lt	[if lt IE 5.5]	The less-than operator. Returns true if the first argument is less than the second argument. 小于运算符。如果第一个参数小于第二个参数，则返回true。
lte	[if lte IE 6]	The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. 小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。
gt	[if gt IE 5]	The greater-than operator. Returns true if the first argument is greater than the second argument. 大于运算符。如果第一个参数大于第二个参数，则返回true。
gte	[if gte IE 7]	The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. 大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。
()	[if !(IE 7)]	Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. 子表达式运营商。在与布尔运算符用于创建更复杂的表达式。
&	[if (gt IE 5)&(lt IE 7)]	The AND operator. Returns true if all subexpressions evaluate to true AND运算符。如果所有的子表达式计算结果为true，返回true。
\|	[if (IE 6)\|(IE 7)]	The OR operator. Returns true if any of the subexpressions evaluates to true. OR运算符。返回true，如果子表达式计算结果为true。

嗯…太复杂太深奥不看，简单来说就是：

除IE外都可识别：
<!--[if !IE]> html代码 <![endif]-->

所有的IE可识别 ：
<!--[if IE]> html代码 <![endif]-->

仅IE8可识别：
<!--[if IE 8]> html代码 <![endif]-->

IE8以下版本可识别（不含IE8）：
<!--[if lt IE 8]> html代码 <![endif]-->

IE8以及IE8以下版本可识别 （含IE8）：
<!--[if lte IE 8]> html代码 <![endif]-->

👉👉👉不推荐向上兼容，貌似IE10以上条件注释就无效了👈👈👈
IE8以上版本可识别（不含IE8）：
<!--[if gt IE 8]> html代码 <![endif]-->

IE8以及IE8以上版本可识别（含IE8）：
<!--[if gte IE 8]> html代码 <![endif]-->

👇👇👇真正的兼容方法，也是适合局部兼容的方法：

通过CSS3的@media媒体查询，来设置hack

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>@media媒体查询</title>
<style type="text/css">
.box {
	width: 300px;
	height: 300px;
	border: 2px solid #000;
	float: left;
	margin: 50px;
}

.img {
	width: 300px;
	height: 300px;
	font-size: 20px;
	line-height: 300px;
	text-align: center;
	color: #000;
	background-color: rgba(255, 0, 0, 0.5);
}

@media \0screen\,screen\9 {
	.img {
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fff0000, endColorstr=#7Fff0000);
	}
}
</style>
</head>

<body>
	<div class="box">
		<div class="img"></div>
	</div>
</body>
</html>

CSS3:root选择器，IE浏览器仅支持IE9

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>:root选择器</title>
<style type="text/css">
.box {
	width: 300px;
	height: 300px;
	border: 2px solid #000;
	float: left;
	margin: 50px;
}

.img {
	width: 300px;
	height: 300px;
	font-size: 20px;
	line-height: 300px;
	text-align: center;
	color: #000;
	background-color: rgba(255, 0, 0, 0.5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fff0000, endColorstr=#7Fff0000);
}

:root .img {
	filter: none;
}
</style>
</head>

<body>
	<div class="box">
		<div class="img"></div>
	</div>
</body>
</html>

CSS3:not()选择器
ps：:not（string）仅仅在IE9+下生效。IE9会自动忽略:not以及之后的内容并生效与当前元素，但IE10会产生实际作用。（IE10及以上string一般是元素或者选择符，而IE9不会在乎，也就说只兼容IE9，括号的内容不重要，但不能为空，也不能是符号。英文字母随便写）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>:not()选择器</title>
<style type="text/css">
.box {
	width: 300px;
	height: 300px;
	border: 2px solid #000;
	float: left;
	margin: 50px;
}

.img {
	width: 300px;
	height: 300px;
	font-size: 20px;
	line-height: 300px;
	text-align: center;
	color: #000;
	background-color: rgba(255, 0, 0, 0.5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fff0000, endColorstr=#7Fff0000);
}

.img:not(string) {
	filter: none;
}
</style>
</head>

<body>
	<div class="box">
		<div class="img"></div>
	</div>
</body>
</html>

👉传送门：

①IE8下实现兼容rgba

②HTML条件注释

③用条件注释判断浏览器版本解决页面兼容问题

⑥IE9透明filter和opacity同时生效的解决办法 IE9 hack only

⑦CSS实现背景透明，文字不透明，兼容所有浏览器

⑤常见浏览器兼容性问题及解决办法总结

⑥史上最全的CSS hack方式一览

iuukai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【IE9/8/7/6/5】RGBA（background-color: rgba(R, G, B, A);）背景透明兼容性（含“条件注释判断浏览器版本”介绍与例子）

关于RGBA的兼容，我百度过后，整理如下（真正的兼容方法在最下面）在不兼容情况下RGBA的属性，对于IE8以下是无效的：所以，下面开始介绍各种兼容方法一、添加IE的filter属性：（兼容IE8以及以下版本，却不兼容IE9）filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fff0000, ...
复制链接

扫一扫