兼容性问题汇总整理

1.background-size平铺不兼容IE8及以下

• IE9+及其他浏览器实现背景图片平铺：

background-size: cover;

• 但是ie8下background-size是不兼容的，因此我们需要用到滤镜，来解决背景图片拉伸问题。
  仅需如下代码：

-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片地址',sizingMethod='scale')";// IE8

 

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片地址',sizingMethod='scale');// IE 5-7

background-size: cover;//现代浏览器

 

也就是说需要按照 -ms-filter -> filter -> opacity 这样的顺序来写，这样才能保证在 IE8 以及 IE7 中都能实现效果。

2.opacity不透明度IE6-8不支持

• IE9+及其他浏览器实现不透明度：

opacity:0.5;//值范围0-1

• 兼容IE8及以下 遮罩效果

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 值范围0-100

 

filter: alpha(opacity=50); // IE 5-7  值范围0-100

opacity: 0.5;//Modern Browsers

 

也就是说需要按照 -ms-filter -> filter -> opacity 这样的顺序来写，这样才能保证在 IE8 以及 IE7 中都能实现效果。

• 背景色透明

filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000,endColorstr=#88000000);

其中startColorstr=#88000000 ，前两位是透明度（ 00-FF），后六位是色值。（！BUG 如果用在遮罩上仍然可以选中下边的文字！）

3.让pre自动换行

默认情况下，<pre > 标签中的内容若超出范围不会自动换行，这样无论在显示或打印都会出现麻烦。下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码

pre{
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}

转载于:https://www.cnblogs.com/zhaowy/p/8400288.html