# 兼容性问题

这篇主要积累一些兼容性问题，不断更新

鲁迅说过：「不搞 IExplorer 的兼容，就不会出现兼容问题。」

# caniuse

caniue (opens new window) 可以查询不同浏览器是否可以使用的属性。

# 浏览器私有前缀

CSS3在很多属性尚未成为W3C标准的一部分时，每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性。

    -webkit-: 谷歌 苹果
    -moz-:火狐
    -ms-：IE
    -o-：欧朋

1
2
3
4

使用举例：

    background: -webkit-linear-gradient(left, green, yellow);
    background: -moz-linear-gradient(left, green, yellow);
    background: -ms-linear-gradient(left, green, yellow);
    background: -o-linear-gradient(left, green, yellow);
    background: linear-gradient(left, green, yellow);

1
2
3
4
5

# 磨平浏览器样式

每个浏览器的CSS默认样式不尽相同，所以最简单最有效的方法就是对其默认样式初始化。以下贴一个各位同学都会的初始化代码。简单暴力但是不明确，*通配符可是有执行性能问题的。

* {
    margin: 0;
    padding: 0;
}

1
2
3
4

以下推荐一种磨平浏览器默认样式的方法，在接入其他css文件前将其导入：

normalize.css (opens new window)：懒人必备的浏览器默认样式库，接近40k的Star

# 优雅降级和渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

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

**推荐使用的是【渐进增强】的写法！**原因是因为在现代浏览器中，存在对加不加前缀的写法都支持的情况，而同一个属性在是否带有前缀的情况下达到的效果是不一样的，选一个摘自张旭鑫博客的示例 (opens new window)

.not-a-square {
   // 这两个家伙干的不是同一个活 
   border-radius: 30px 10px;
   -webkit-border-radius: 30px 10px;
}

1
2
3
4
5

当属性超过一个参数值的时候，不同的属性产生的作用是不一样的。

纯情的那种写法(border-radius: 30px 10px)，是让box左上和右下角为30像素圆弧，左下角和右上是10像素圆弧。而那种杂碎的前缀写法(-webkit-border-radius)，则box渲染为每个角都是30像素宽10像素高的圆弧。

如下图所示：不同CSS3属性的不同表现张鑫旭-鑫空间-鑫生活

# 浏览器默认的 margin 和 padding 不同

解决方案：加一个全局的 *{margin:0;padding:0;} 来统一，或者使用 normalize.css (opens new window) 预置样式

# IE6 双边距 bug

在 IE6 下，如果对元素设置了浮动，同时又设置了 margin-left 或 margin-right，margin 值会加倍。

#box{ float:left; width:10px; margin:00010px;}

这种情况之下 IE 会产生 20px 的距离

解决方案：

在 float 的标签样式控制中加入 _display:inline; 将其转化为行内属性。( _ 这个符号只有 ie6 会识别）
float 方向和 margin 相反

# IE 下，获取自定义属性用获取常规

IE 下，可以使属性的方法来获取自定义属性用获取常规，也可以使用 getAttribute() 获取自定义属性；

Firefox 下，只能使用 getAttribute() 获取自定义属性

解决方法：统一通过 getAttribute() 获取自定义属性

# event 对象的区别

IE 下，event 对象有 x、y 属性，但是没有 pageX、pageY 属性；

Firefox 下，event 对象有 pageX、pageY 属性，但是没有 x、y 属性

解决方法：（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。

# Chrome 12px 像素

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决

# hover 和 active 失效

超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active 了

解决方法：改变 CSS 属性的排列顺序 L-V-H-A（也叫 LOVE 法则？）

a:link {}a:visited {}a:hover {}a:active {}

# 怪异模式问题

漏写 DTD 声明，Firefox 仍然会按照标准模式来解析网页，但在 IE 中会触发怪异模式。

为避免怪异模式给我们带来不必要的麻烦，最好养成书写 DTD 声明的好习惯。

现在可以使用 html5, 推荐的写法：<!DOCTYPE html>

# 上下 margin 重合问题

IE 和 Firefox 都存在，相邻的两个 div 的 margin-left 和 margin-right 不会重合，

但是 margin-top 和 margin-bottom 却会发生重合。

解决方法：养成良好的代码编写习惯，同时采用 margin-top 或者同时采用 margin-bottom。

← 回流重绘居中问题 →