前端开发 - 兼容性.md

[backup] 前端开发 - 兼容性

低级浏览器

主要针对IE来对比说明

PNG24位饿图片在 IE6 浏览器上出现背景

将图片做成 PNG8

浏览器默认 margin 和 padding 不同

设置全局 margin 和 padding 均为 0 来统一

* {
  margin: 0;
  padding: 0
}

垂直居中

# 将行距增加到和整个DIV一样高 line-height:200px;然后插入文字，就垂直居中了；缺点是要控制内容不要换行。
vertical-align: middle;

# DIV 随之居中，但是高度必须确定，否则无法垂直居中。
height: 100px;
display: block;
position: absolute;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;

Double margin

设置为float的div在ie下设置的margin会加倍。将 div 设置成 display: inline; 能解决该问题

_display: inline;
flat: left;
margin-right: 10px;

这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);

若要实现同行排列

display: table;

ie6 min- 问题

IE6 没有 min-，但是他本身 width，height 就支持这种特性。

#container {
  min-width: 600px;
  width: expression_r(document.body.clientWidth ＜ 600? "600px": "auto" );
}
# 第一个min-width是正常的；css制作但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。
# 它实际上通过Javascript的判断来实现最小宽度。

div 浮动 ie 文本产生 3px 的 bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。

#left {
  float: left;
}

*html #left {
  margin-right: -3px;
}

清除浮动

IE6图片有空隙

img {
  display: block;
  # or
  vertical-align: top|bottom|middle|text-bottom;
}

使用 hack

.a { color: #fff; /* 所有浏览器 * .color: #000; /* IE6,7,8 / +color: #f0f; / IE6,7 / _color: #0f0; / IE6 */ }

自定义属性获取

IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性; Firefox下，只能使用 getAttribute() 获取自定义属性； 解决方法:统一通过 getAttribute() 获取自定义属性。

Event 对象

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

Chrome 中文界面不能设置少于12px 的字体

可以设置 -webkit-text-size-adjust: none; 解决

• { -webkit-text-size-adjust: none; }

但现在只能通过 config:about 设置允许出现 12px 该样式才能生效

超链接访问过后 hover 样式就不出现了

被点击访问过的超链接样式不在具有 hover 和 active 了，可以通过改变CSS属性的排列顺序: L-V-H-A: a:link {} a:visited {} a:hover {} a:active {}

# LESS
a {
  &:link {}
  &:visited {}
  &:hover {}
  &:active {}
}