IE9以下浏览器对CSS3的常用兼容处理

html-css013

IE9以下浏览器对CSS3的常用兼容处理,第1张

html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。

respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

官方网站: http://css3pie.com/

演示地址: http://css3pie.com/demos/gradient-patterns/

1.兼容border-radius

2.阴影效果

3.部分 CSS3 的效果,如 多张背景图,border-image,背景颜色渐变效果

4.png 图片透明效果

e浏览器从ie8开始添加了兼容模式,开启后会以低版本的ie进行渲染。兼容模式有可能会导致网页显示出问题,于是通常在html中添加下列代码来使

ie

使用固定的渲染模式:

代码如下:

<metahttp-equiv="x-ua-compatible"content="ie=8"><!--以ie8模式渲染-->

<metahttp-equiv="x-ua-compatible"content="ie=7"><!--以ie7模式渲染-->

有一种情况,在ie8下只有不使用兼容模式页面才能显示正常,但是如果设定为ie8的模式,在ie9中却会导致css3失效。看来,需要针对

ie8、ie9

分别

禁用兼容模式。怎么办呢?可以在后台判断浏览器版本,如果是ie8就输出content="ie=8",如果是ie9就输出

content="ie=9"。其实还可以单纯通过html来实现的,html代码如下:

<metahttp-equiv="x-ua-compatible"content="ie=9

ie=8

ie=7

ie=edge">

兼容IE6,IE7,IE8的元素背景渐变

<!DOCTYPE html>  

<html>  

<head>  

<meta charset=utf-8 />  

<title>CSS 实现元素背景渐变</title>  

</head>  

<body>  

<style type="text/css">   

.demo {   

width:100%   

height:200px   

background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c))   

background: -webkit-linear-gradient(left, #80c1e7, #213c7c)   

background: -moz-linear-gradient(left, #80c1e7, #213c7c)   

background: -o-linear-gradient(left, #80c1e7, #213c7c)   

background: -ms-linear-gradient(left, #80c1e7, #213c7c)   

background: linear-gradient(left, #80c1e7, #213c7c)   

filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #80c1e7, endColorstr = #213c7c)   

}   

</style>  

<div class="demo"></div>  

</body>  

</html>