欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ie兼容性问题

程序员文章站 2022-04-11 12:24:02
...

ie8不兼容透明度

	background:#ffffff; /*支持rgba的浏览器*/
    -khtml-opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity=0);
    filter:"alpha(opacity=0)";
    opacity:0; 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);/*兼容ie8及以下*/

select选择框下的display设置为none时无法隐藏

这个问题可以用js解决,需要option的时候用js添加进去

标签得闭合,要有结束标签

IE8不支持以便签斜杠直接结尾。
页面错位,可能是标签少结束符。

last-child

first-child是CSS2的内容,但是last-child不是,所以IE8不行。
推荐的解决方法不是使用last-child,而是给最后一个元素设置一个.last的class,然后对此进行样式设置,这样就全部兼容了。

img

有边框并且有颜色,边框会占位置
解决方法:img{border:none}

background

#fff url() no-repeat 0/center 

注意:颜色一定在最前面,属性间有空格。

不兼容placeholder

使用js插件:jquery.placeholder.js
https://github.com/mathiasbynens/jquery-placeholder

不兼容text-overflow

overflow: hidden; 
white-space: nowrap; 

这两个属性让起溢出隐藏和不换行,然后IE8用的时候记得不要加

word-berak:break-all; 
word-wrap:break-word; 

这样断开了,在IE8里面是不会变成省略号的
(但是在IE6/7/FF/Chrome都没有问题),其实都单行省略了,本来也没有必要断词
所以一般标准组合就是:

overflow: hidden; 
white-space: nowrap; 
-o-text-overflow: ellipsis; /* for Opera */ 
text-overflow: ellipsis; /* for IE */ 

不兼容line-height

 line-height:32px;
 line-height: 32px\9; /*IE8*/
*line-height: 32px; /* IE7支持 */
_line-height: 32px; /* IE6支持 */
-ms-line-height: 32px;/*IE9+支持*/
-webkit-line-height:32px; /*chrome safair*/
-moz-line-height: 32px;/*火狐*/

不兼容transform

使用filter的Matrix(矩阵)

不兼容border-radius

推荐用背景图代替

ie8不兼容HTML5新标签

HTML5的新标签元素有:

<header>定义页面或区段的头部;
<footer>定义页面或区段的尾部;
<nav>定义页面或区段的导航区域;
<section>页面的逻辑区域或内容组合;
<article>定义正文或一篇完整的内容;
<aside>定义补充或相关内容;