浏览器常见的兼容问题

发表于 | 分类于 |

浏览器常见的兼容问题、原因、解决方法

不同浏览器的标签默认的 margin 和 padding 不同

描述

同一标签在不加样式的情况下，在不同浏览器下的 margin 和 padding 值相差较大。例如列表、图片等。

解决

1
2
3
4
* {
    margin: 0;
    padding: 0;
}

块级元素浮动 + 横向margin

描述

块级元素浮动 + 横向 margin，在 IE6 上 margin 值比设置值大，可能会导致 IE6 后面的一块被挤到下一行。

解决

将浮动的块级元素设置为行内元素（display: inline;）

字体大小定义不同

描述

对 small 属性定义不同，Firefox 为 13px，IE 为 16px。

解决

采用固定像素值或相对单位设置字体大小。

图片有默认间距

描述

图片一行排列时会有默认间距，Firefox：5px，IE 和 Chrome：4px。

解决

设置图片浮动。

盒子模型

描述

盒子模型有两种，一种为 W3C 模式：为元素设置宽（width）和高（height）就是为内容（content）设置；一种为 IE 模式：内容（content）+ 填充（padding）+ 边框（border）才等于元素的宽高。IE8 及以下版本在混杂模式下为 IE 模式，其他情况均为 W3C 模式。

解决

保证 DOCTYPE 声明正确，确保布局均为 W3C 盒子模型。

透明度

描述

IE8 及以下版本不支持 opacity 属性。

解决

1
2
opacity: 0.6 /* 0-1 */
filter:Alpha(opacity=50);  /* IE8 及以下版本，范围为 0-100 */

innerText

描述

获取标签内文本时，Firefox 不支持 innerText，但支持 textContent；IE8 及以下不支持 textContent。

解决

1
2
3
4
5
6
if (navigator.appName.indexOf("Explorer") > -1) {
     document.getElementById('element').innerText = "my text";
}
else {
     document.getElementById('element').textContent = "my text";
}

不能识别 min-/max- 前缀

描述

IE6 及以下版本并不能识别 min-/max- 前缀。

解决

1
2
3
4
5
min-width: 600px;
width:expression(document.body.clientWidth < 600 ? "600px" : "auto" );
max-width: 600px;
width:expression(document.body.clientWidth > 600 ? "600px" : "auto" );

ul 和 ol 列表缩进问题

描述

对于非 IE 浏览器和 IE8 及以上版本而言，设置 margin: 0; 可以去除上下空白；设置 padding: 0; 可以去除列表编号或原点、左右空白。

对于 IE7 及以下版本浏览器而言，设置 margin: 0; 可以去除列表编号或原点、左右空白；设置 padding: 0; 无任何变化。

解决

同时设置 margin 和 padding 均为 0。

常见 hack 技术

概念

由于不同厂商的浏览器，比如 IE、Safari、Firefox、Chrome 等，或者是同一厂商的浏览器的不同版本，如 IE6 和 IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack 的目的就是使你的 CSS 代码兼容不同的浏览器。当然，我们也可以反过来利用 CSS hack为不同版本的浏览器定制编写不同的 CSS 效果。

分类

选择器前缀法

1
2
*html selector{color:blue;}    /* *html前缀只支持IE6 */
*+html selector{color:blue;}    /* *+html前缀只支持IE7 */

属性前缀法

1
2
3
4
5
6
7
.header {_width:100px;} /* 下划线"*"——IE6专用 */
.header {*+width:100px;} /* 星号加号"*+"——IE7专用 */
.header {*width:100px;} /* 星号"*"——IE6、IE7共用 */
 
.header {width:100px\0;} /* "\0"——IE8、IE9共用 */
.header {width:100px\9;} /* "\9"——IE6、IE7、IE8、IE9共用 */
.header {width:330px\9\0;} /* "\9\0"——IE9专用 */

IE6 能识别下划线和星号，IE7 只能识别星号，但不能识别下划线，IE6-IE10 都能识别 “\9”。

条件注释法（一般用于 IE6-IE9）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--[if IE 6]>
    只在 IE6 下显示
<![endif]-->
<!--[if !IE]>
     在非 IE 显示
<!--<![endif]-->
<!--[if lt IE 8]
只在 IE8 以下（不含IE8）版本显示
<![endif]-->
<!--[if lte IE 8]
     只在 IE8 以下（含IE8）版本显示
<![endif]-->
<!--[if gt IE 8]
     只在 IE8 以上（不含IE8）版本显示
<![endif]-->
<!--[if gte IE 8]
     只在 IE8 以上（含IE8）版本显示
<![endif]-->

条件注释法中还可以用与（&）、或（|）运算符。

Fork me on GitHub