常见的浏览器兼容问题

2021-08-31 17:42发布

概述

IE兼容性一般主要是两个问题引起的:一、代码只支持高版本IE不支持低版本IE 二、代码只支持低版本IE不支持高版本IE(这个比较少但也存在,主要是一些老的系统)。

 

常规解决方法

通过在jsp页面增加meta的方式来实现兼容。

 

兼容高版本IE

如果系统只支持低版本的IE,但是用户的电脑的IE版本比较高,可以限定浏览器对文档的解析到某一特定版本,或者将浏览器限定到一些旧版本的表现中。可以用如下的方式:

 

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >

 

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >

 

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >

 

 

兼容低版本IE

系统兼容低版本IE比较困难,能做到的是指定浏览器按照最高的标准模式解析页面。主要是用来解决有些用户的电脑明明用的是IE8、IE9,但是确实用的IE7的文档模式。

 

<meta http-equiv="x-ua-compatible" content="IE=edge" >

 

通过IE嵌入谷歌插件

如果用户的电脑确实比较老,也不方便安装高版本的IE,通过常规的解决方法无法解决兼容性问题的话,可以通过嵌入谷歌插件(Google Chrome Frame),这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。需要注意的是谷歌已在2014年停止对此插件的更新,此插件的离线版本网上非常多,但是很多都用不了,博主也是找了好久才找到一个能用到。

 

二、常见的兼容问题

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

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

 

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

IE8不支持以便签斜杠直接结尾。

页面错位,可能是标签少结束符。

 

3、last-child

first-child是CSS2的内容,但是last-child不是,所以IE8不行。

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

 

4、img

有边框并且有颜色,边框会占位置

解决方法:img{border:none}

 

5、background

#fff url() no-repeat 0/center

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

 

6、不兼容placeholder

使用js插件:jquery.placeholder.js

https://github.com/mathiasbynens/jquery-placeholder

 

7、不兼容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 */

 

8、不兼容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;/*火狐*/

 

9、不兼容transform

使用filter的Matrix(矩阵)

 

10、不兼容border-radius

推荐用背景图代替

 

11、ie8不兼容HTML5新标签

HTML5的新标签元素有:

 

<header>定义页面或区段的头部;

<footer>定义页面或区段的尾部;

<nav>定义页面或区段的导航区域;

<section>页面的逻辑区域或内容组合;

<article>定义正文或一篇完整的内容;

<aside>定义补充或相关内容;