前端兼容性及解决方法

HTML 篇

样式兼容性问题

<!-- IE 按 Edge 模式渲染 --><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!-- IE 8 9 10 按 IE7 模式渲染 --><meta http-equiv="X-UA-Compatible" content="IE=Emulate7" />

怪异模式

怪异模式是没有遵守 W3C 规范的一种兼容模式，其中的 width 是包括 contentWidth, 左右padding, 左右border 在内的全部范围(height 也一样)，类似于 box-sizing: border-box;，而且 table 的 font-size 不能从父元素继承。以下情况会触发浏览器怪异模式(Quirks Mode):

没写 DOCTYPE 触发怪异模式

在<!DOCTYPE ...>前加<?xml version="1.0" encoding="utf-8" ?>, IE6 下会触发怪异模式

在<!DOCTYPE ...>前加入<!-- keep IE7 in Quirks Mode -->, IE7进入怪异模式

<!DOCTYPE ...>前有任何非空字符，会在IE6 下会触发怪异模式

<!DOCTYPE ...>前有 XML ，在IE7 下不会触发怪异模式，但不能有其他非空字符

检查document.compatMode,可以查看浏览器工作在哪个模式：值BackCompat为怪异模式，值CSS1Compat为标准模式

display:inline-block 元素间有间隙

 

IE可能出现的文档样式短暂失效问题

 

css 篇

双倍间距问题

 

扫描二维码关注公众号，回复： 1596085 查看本文章

IE6 奇数宽高问题

IE6 中盒子的宽(width) 和高(height)设置为奇数时会有 bug，尽量设置为偶数即可。

IE6 Peekaboo Bug

一个 div#top 中加入一个 div#float 向左浮动，然后加入一个或多个 div, 直到清除浮动为止：

 

解决方法，给 #top 一个 height 或 width ：

 

盒子坍塌

这个问题比较普遍，在盒内层元素设置外边距时会发生

 

文字大小

字体大小在不同浏览上不一致。例如font-size:14px，在 IE 中的实际行高是16px，下面有3px留白；在 Firefox 中的实际行高是17px，下面有3px留白，上边1px留白；在 opera 中就更不一样了。解决方式统一指定行高 line-height

 

另外，我们会遇到 font-size:62.5% 这样的定义，为了把默认的 16px 映射为 10px, 这样1em = 10px 更利于计算。

liuqing