在调试ie8兼容性的问题时,发现ie8不支持rgba。
关于rgba(),即为颜色设置的方法函数,rgb代表颜色,a代表透明度。
如rgba(0,0,0,0.1)表示透明值为0.1的黑色。
<div style="height:100px;width:100px;rgba(196, 50, 61,0.7)"></div>
如上,是一个红色透明的正方形的方块,但在ie8中不能正常显示,只能显示成一个透明的模块,也就是看不见了。
这时就需要使用ie的filter来解决rgba的问题,从网上看到这样一句解决写法:
<div style="height:100px;width:100px;rgba(196, 50, 61,0.7);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2C4323D,endColorstr=#B2C4323D);"></div>
这里的#B2C4323D是对颜色和透明度设置。#后前两位是对透明度的设置,而接下来的6位是16进制的颜色设置。
关于透明度和IEfilter之间的换算:
rgba透明值 | IEfilter |
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 |
下面是RGB颜色与16进制颜色的换算方法:
比如rgb(196, 50, 61),
196/16等于12余4,12对应的是C,所以196对应的值C4,
50/16等于3余2,所以对应的值为32,
61/16等于3余13,所以对应的值为3D。
因此rgb(196, 50, 61)对应的值为#C4323D。
下面是RGB颜色与16进制颜色的换算表:
RGB | HEX |
0 | 00 |
1 | 01 |
2 | 02 |
3 | 03 |
4 | 04 |
5 | 05 |
6 | 06 |
7 | 07 |
8 | 08 |
9 | 09 |
10 | 0A |
11 | 0B |
12 | 0C |
13 | 0D |
14 | 0E |
15 | 0F |
16 | 10 |
17 | 11 |
18 | 12 |
19 | 13 |
20 | 14 |
21 | 15 |
22 | 16 |
23 | 17 |
24 | 18 |
25 | 19 |
26 | 1A |
27 | 1B |
28 | 1C |
29 | 1D |
30 | 1E |
31 | 1F |
32 | 20 |
33 | 21 |
34 | 22 |
35 | 23 |
36 | 24 |
37 | 25 |
38 | 26 |
39 | 27 |
40 | 28 |
41 | 29 |
42 | 2A |
43 | 2B |
44 | 2C |
45 | 2D |
46 | 2E |
47 | 2F |
48 | 30 |
49 | 31 |
50 | 32 |
51 | 33 |
52 | 34 |
53 | 35 |
54 | 36 |
55 | 37 |
56 | 38 |
57 | 39 |
58 | 3A |
59 | 3B |
60 | 3C |
61 | 3D |
62 | 3E |
63 | 3F |
64 | 40 |
65 | 41 |
66 | 42 |
67 | 43 |
68 | 44 |
69 | 45 |
70 | 46 |
71 | 47 |
72 | 48 |
73 | 49 |
74 | 4A |
75 | 4B |
76 | 4C |
77 | 4D |
78 | 4E |
79 | 4F |
80 | 50 |
81 | 51 |
82 | 52 |
83 | 53 |
84 | 54 |
85 | 55 |
86 | 56 |
87 | 57 |
88 | 58 |
89 | 59 |
90 | 5A |
91 | 5B |
92 | 5C |
93 | 5D |
94 | 5E |
95 | 5F |
96 | 60 |
97 | 61 |
98 | 62 |
99 | 63 |
100 | 64 |
101 | 65 |
102 | 66 |
103 | 67 |
104 | 68 |
105 | 69 |
106 | 6A |
107 | 6B |
108 | 6C |
109 | 6D |
110 | 6E |
111 | 6F |
112 | 70 |
113 | 71 |
114 | 72 |
115 | 73 |
116 | 74 |
117 | 75 |
118 | 76 |
119 | 77 |
120 | 78 |
121 | 79 |
122 | 7A |
123 | 7B |
124 | 7C |
125 | 7D |
126 | 7E |
127 | 7F |
128 | 80 |
129 | 81 |
130 | 82 |
131 | 83 |
132 | 84 |
133 | 85 |
134 | 86 |
135 | 87 |
136 | 88 |
137 | 89 |
138 | 8A |
139 | 8B |
140 | 8C |
141 | 8D |
142 | 8E |
143 | 8F |
144 | 90 |
145 | 91 |
146 | 92 |
147 | 93 |
148 | 94 |
149 | 95 |
150 | 96 |
151 | 97 |
152 | 98 |
153 | 99 |
154 | 9A |
155 | 9B |
156 | 9C |
157 | 9D |
158 | 9E |
159 | 9F |
160 | A0 |
161 | A1 |
162 | A2 |
163 | A3 |
164 | A4 |
165 | A5 |
166 | A6 |
167 | A7 |
168 | A8 |
169 | A9 |
170 | AA |
171 | AB |
172 | AC |
173 | AD |
174 | AE |
175 | AF |
176 | B0 |
177 | B1 |
178 | B2 |
179 | B3 |
180 | B4 |
181 | B5 |
182 | B6 |
183 | B7 |
184 | B8 |
185 | B9 |
186 | BA |
187 | BB |
188 | BC |
189 | BD |
190 | BE |
191 | BF |
192 | C0 |
193 | C1 |
194 | C2 |
195 | C3 |
196 | C4 |
197 | C5 |
198 | C6 |
199 | C7 |
200 | C8 |
201 | C9 |
202 | CA |
203 | CB |
204 | CC |
205 | CD |
206 | CE |
207 | CF |
208 | D0 |
209 | D1 |
210 | D2 |
211 | D3 |
212 | D4 |
213 | D5 |
214 | D6 |
215 | D7 |
216 | D8 |
217 | D9 |
218 | DA |
219 | DB |
220 | DC |
221 | DD |
222 | DE |
223 | DF |
224 | E0 |
225 | E1 |
226 | E2 |
227 | E3 |
228 | E4 |
229 | E5 |
230 | E6 |
231 | E7 |
232 | E8 |
233 | E9 |
234 | EA |
235 | EB |
236 | EC |
237 | ED |
238 | EE |
239 | EF |
240 | F0 |
241 | F1 |
242 | F2 |
243 | F3 |
244 | F4 |
245 | F5 |
246 | F6 |
247 | F7 |
248 | F8 |
249 | F9 |
250 | FA |
251 | FB |
252 | FC |
253 | FD |
254 | FE |
255 | FF |
相关推荐
rgba的ie浏览器支持换算器: 实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性。 输入十六进制的颜色值以及透明度,自动在IE的过渡...
总之,虽然IE浏览器不直接支持RGBa,但通过滤镜技术可以实现类似的效果。理解并掌握这些技巧对于确保网站在各种浏览器上的兼容性和视觉一致性至关重要。同时,随着现代浏览器的广泛使用,RGBa和其他CSS3特性已成为...
这个技巧是解决IE8不支持rgba()的一个常见方法,它允许我们在保持对新浏览器的先进功能支持的同时,也能确保旧版浏览器的兼容性。不过,随着现代浏览器的普及,这种方法逐渐被新的前缀技术和渐进增强策略所取代。但...
下面我们将详细探讨如何让这些旧版IE支持CSS3的圆角和阴影样式。 首先,让我们来了解CSS3中的圆角和阴影效果。在CSS3中,`border-radius`属性用于创建圆角效果,它可以分别设置四个角的圆角半径,或者用简写形式一...
由于IE6到IE8不支持使用百分比形式的RGBA,所以需要一些技巧来实现兼容。以下是两种常见的解决方案: 1. **CSSPIE (CSS3 Pie)**: 这是一个JavaScript库,它可以扩展IE浏览器对CSS3属性的支持,包括RGBA。通过添加`-...
标题中的“ie 6 ie7 ie8 支持css3”指的是如何使老旧的Internet Explorer(IE)浏览器,包括版本6、7和8,能够支持CSS3的新特性。CSS3是层叠样式表的第三个主要版本,引入了大量增强网页设计的新功能,如圆角、阴影...
但在IE8和IE9中,由于对媒体查询的支持有限,以及对某些CSS3属性的不完全支持,会导致栅格系统的显示异常,如列宽计算错误、布局错乱等。 压缩包中的"bootstrap-ie8_ie9"文件可能包含以下内容: 1. ** Respond.js ...
在早期的Internet Explorer(IE)浏览器版本中,不支持CSS3中的`rgba()`函数,该函数用于定义具有透明度的背景颜色。`rgba()`语法允许指定一个颜色(红、绿、蓝通道)以及一个介于0(完全透明)和1(完全不透明)...
在IE8+支持CSS的多种方法,使得开发者能够灵活地处理不同场景下的垂直居中问题。下面我们将详细探讨几种主要的垂直居中技术及其应用。 1. **表格布局(Table-Cell Display)** 使用CSS的`display`属性设置为`table...
对于不支持RGBa的浏览器,可以使用渐变滤镜或纯色作为回退方案,同时利用条件注释来针对特定的IE版本进行优化。随着技术的进步,越来越多的浏览器开始支持这种先进的颜色表示方式,使得Web设计的视觉效果更加丰富...
对于IE浏览器,由于它不支持RGBa,可以使用IE特有的滤镜来实现透明效果。条件注释是一种只在IE浏览器下执行的特殊注释方式。可以通过这种方式为IE浏览器提供一个透明效果的滤镜代码: ```html <!--[if IE]> .color...
在过去的版本中,尤其是Internet Explorer(IE)和较早的Opera浏览器,它们可能不支持RGBA。为了确保跨浏览器的兼容性,可以使用一种叫做“渐进增强”或“适度降级”的策略。例如,可以先定义一个所有浏览器都理解的...
4. **使用CSS3的`rgba()`颜色表示法**:尽管IE8及以上版本支持此方法,但IE6和7不支持。`rgba()`允许指定颜色的透明度,但不适用于IE6以下版本。 5. **GIF替代法**:对于简单的透明效果,可以考虑将PNG替换为支持...
由于IE6和IE7不支持某些CSS特性,如`:hover`伪类应用到非`<a>`元素上,所以我们需要进行一些调整。可以使用JavaScript或jQuery来解决这个问题,但这里我们只使用CSS。 1. 对于IE6和IE7,我们可以使用`<a>`元素包裹...
5. 颜色和字体:IE6不支持`rgba()`颜色和`@font-face`字体引入,需要使用`hex`颜色和`png`透明图片,或者采用`filter`滤镜处理。 二、解决方案 1. 使用条件注释:通过HTML的条件注释,针对不同版本的IE应用不同的...
需要注意的是,虽然现代浏览器都支持RGBA透明度属性,但在IE浏览器早期版本中(如IE8及以下),开发者仍然需要使用filter属性来实现透明效果。本文档的转换计算表正是为了解决这一历史兼容性问题而提供的。随着IE...
让IE 6,7,8支持CSS3的部分属性。它可以让低版本IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。
1.PIE.htc是一个可以解决IE6/7/8无法支持CSS3属性的文件,其利用VML绘制相关的效果。要注意的是它并不能实现所有CSS3效果,其兼容的属性有:box-radius,线性渐变( linear-gradient),rgba,box-shadow,border-image。...