浏览器的兼容问题

浏览器中遇到一些兼容问题的处理

一、浏览器CSS兼容前缀

1 2 3 4 5 6 7 8 9

-o-transform:rotate(7deg); // Opera -ms-transform:rotate(7deg); // IE -moz-transform:rotate(7deg); // Firefox -webkit-transform:rotate(7deg); // Chrome transform:rotate(7deg); // 统一标识语句

二、bootstrap不支持IE兼容模式

1 2 3

<meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> //ie浏览视图设为最高

三、IE的双倍边距问题

设置 ie6 中设置浮动，同时又设置 margin，会出现双倍边距的问题

1	diaplay:inline;

四、解决IE9以下浏览器不能使用opacity

1 2 3

Eg：opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.50;

五、让 IE7 IE8 支持 CSS3 background-size属性

由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。

1 2 3 4 5 6 7 8 9 10 11 12 13

html { height: 100%; } body { height: 100%; margin: 0; padding: 0; background-image: url('img/37.png'); background-repeat: no-repeat; background-size: cover; -ms-behavior: url('css/backgroundsize.min.htc'); behavior: url('css/backgroundsize.min.htc'); }

赏

谢谢你请我吃糖果