所谓的浏览器兼容性问题, 是指因为不同的浏览器对同一段代码有不同的解析, 造成页面显示效果不统一的情况在大多数情况下, 我们的需求是, 无论用户用什么浏览器来查看我们的网站或者登陆我们的系统, 都应该是统一的显示效果所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题
在学习浏览器兼容性之前, 我想把前端开发人员划分为两类:
第一类是精确按照设计图开发的前端开发人员, 可以说是精确到 1px 的, 他们很容易就会发现设计图的不足, 并且在很少的情况下会碰到浏览器的兼容性问题, 而这些问题往往都是浏览器的 bug, 并且他们制作的页面后期易维护, 代码重用问题少, 可以说是比较牢固放心的代码
第二类是基本按照设计图来开发的前端开发人员, 很多细枝末节差距很大, 不如间距, 行高, 图片位置等等经常会差几 px 某种效果的实现也是反复调试得到, 具体为什么出现这种效果还模模糊糊, 整体布局十分脆弱稍有改动就乱七八糟代码为什么这么写还不知所以然这类开发人员往往经常为兼容性问题所困修改好了这个浏览器又乱了另一个浏览器改来改去也毫无头绪其实他们碰到的兼容性问题大部分不应该归咎于浏览器, 而是他们的技术本身了
这篇文章主要针对的是第一类, 严谨型的开发人员, 因此这里主要从浏览器解析差异的角度来分析兼容性问题
浏览器兼容问题一: 不同浏览器的标签默认的外补丁和内补丁不同
问题症状: 随便写几个标签, 不加样式控制的情况下, 各自的 margin 和 padding 差异较大
碰到频率: 100%
解决方案: CSS 里 {margin:0;padding:0;}
备注: 这个是最常见的也是最易解决的一个浏览器兼容性问题, 几乎所有的 css 文件开头都会用通配符来设置各个标签的内外补丁是 0
浏览器兼容问题二: 块属性标签 float 后, 又有横行的 margin 情况下, 在 ie6 显示 margin 比设置的大
问题症状: 常见症状是 ie6 中后面的一块被顶到下一行
碰到频率: 90%(稍微复杂点的页面都会碰到, float 布局最常见的浏览器兼容问题)
解决方案: 在 float 的标签样式控制中加入 display:inline; 将其转化为行内属性
备注: 我们最常用的就是 div+css 布局了, 而 div 就是一个典型的块属性标签, 横向布局的时候我们通常都是用 div float 实现的, 横向的间距设置如果用 margin 实现, 这就是一个必然会碰到的兼容性问题
浏览器兼容问题三: 设置较小高度标签(一般小于 10px), 在 ie6,ie7, 遨游中高度超出自己设置高度
问题症状: ie67 和遨游里这个标签的高度不受控制, 超出自己设置的高度
碰到频率: 60%
解决方案: 给超出高度的标签设置 overflow:hidden; 或者设置行高 line-height 小于你设置的高度
备注: 这种情况一般出现在我们设置小圆角背景的标签里出现这个问题的原因是 ie8 之前的浏览器都会给标签一个最小默认的行高的高度即使你的标签是空的, 这个标签的高度还是会达到默认的行高
浏览器兼容问题四: 行内属性标签, 设置 display:block 后采用 float 布局, 又有横行的 margin 的情况, ie6 间距 bug(类似第二种)
问题症状: ie6 里的间距比超过设置的间距
碰到几率: 20%
解决方案: 在 display:block; 后面加入 display:inline;display:table;
备注: 行内属性标签, 为了设置宽高, 我们需要设置 display:block;(除了 input 标签比较特殊)在用 float 布局并有横向的 margin 后, 在 ie6 下, 他就具有了块属性 float 后的横向 margin 的 bug 不过因为它本身就是行内属性标签, 所以我们再加上 display:inline 的话, 它的高宽就不可设了这时候我们还需要在 display:inline 后面加入 display:talbe
浏览器兼容问题五: 图片默认有间距
问题症状: 几个 img 标签放在一起的时候, 有些浏览器会有默认的间距, 加了问题一中提到的通配符也不起作用
碰到几率: 20%
解决方案: 使用 float 属性为 img 布局
备注: 因为 img 标签是行内属性标签, 所以只要不超出容器宽度, img 标签都会排在一行里, 但是部分浏览器的 img 标签之间会有个间距去掉这个间距使用 float 是正道
浏览器兼容问题六: 标签最低高度设置 min-height 不兼容
问题症状: 因为 min-height 本身就是一个不兼容的 css 属性, 所以设置 min-height 时不能很好的被各个浏览器兼容
碰到几率: 5%
解决方案: 如果我们要设置一个标签的最小高度 200px, 需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注: 在 B/S 系统前端开时, 有很多情况下我们又这种需求当内容小于一个值 (如 300px) 时容器的高度为 300px; 当内容高度大于这个值时, 容器高度被撑高, 而不是出现滚动条这时候我们就会面临这个兼容性问题
浏览器兼容问题七: 透明度的兼容 css 设置
方法是: 每写一小段代码 (布局中的一行或者一块) 我们都要在不同的浏览器中看是否兼容, 当然熟练到一定的程度就没这么麻烦了建议经常会碰到兼容性问题的新手使用很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的, 只要我们稍加设置都能轻松地解决这些兼容问题如果我们熟悉标签的默认属性的话, 就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题
/ css hack/
我很少使用 hacker 的, 可能是个人习惯吧, 我不喜欢写的代码 ie 不兼容, 然后用 hack 来解决不过 hacker 还是非常好用的
使用 hacker 我可以吧浏览器分为 3 类: ie6 ;ie7 和遨游; 其他(ie8 chrome ff safari opera 等)
ie6 认识的 hacker 是下划线_ 和星号
ie7 遨游认识的 hacker 是星号 (包括上面问题 6 中的 !important 也算是 hack 的一种不过实用性较小)
比如这样一个 css 设置 height:300px;height:200px;_height:100px;
ie6 浏览器在读到 height:300px 的时候会认为高时 300px; 继续往下读, 他也认识 heihgt, 所以当 ie6 读到 height:200px 的时候会覆盖掉前一条的相冲突设置, 认为高度是 200px 继续往下读, ie6 还认识_height, 所以他又会覆盖掉 200px 高的设置, 把高度设置为 100px;
ie7 和遨游也是一样的从高度 300px 的设置往下读当它们读到 height200px 的时候就停下了, 因为它们不认识_height 所以它们会把高度解析为 200px;
剩下的浏览器只认识第一个 height:300px; 所以他们会把高度解析为 300px
因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个, 所以书写的次序是很重要的
最后说一下, 严谨型的开发人员会有一套合适自己的 RESET.CSS 结合自己的经验尽量规避容易出现不兼容的问题以减少 hack 的使用, 尽量符合 W3C 的标准
来源: http://www.qdfuns.com/article/23669/8c6e04f6a6696da2f62237d03222794c.html