Web前端浏览器兼容性及解决方案

前端开发搭建本地服务器热更新 前端开发工程搭建 搭建前端自动化开发     

兼容性问题是许多刚刚从事前端的工作者都无可避免要面对的一大难题，也许为了处理一个bug，半天时间过去了，可依然没有进展，这时候的你该情何以堪呢！在过去的项目中，我也碰到过这样那样的bug，花费了不是精力和时间，一个个解决了。在这里，我把所遇见过的各类bug进行汇总，写下来，以供参考。我想说的是，这些只不过是浏览器bug的冰山一角，还有哪些，希望大家补充…
汇总如下：
          一般规则

1.保证代码简洁、结构合理

2. 表单元素不设宽度或设置size时，宽度不一致。

解决方案：为表单元素设置宽度

3. 标题元素（h1~h6）的margin，字号不一致

解决方案：将其margin进行重置，再赋予margin、font-size值

4.  浮动元素高度塌陷

解决方案：给元素清除浮动

5. 文字与图片无法垂直居中显示

给img标签设置vertical-align: middle样式

IE6 Bug

6. 双倍外边距

问题描述：同时使用了浮动和外边距，会产生2倍于标准浏览器的外边距

解决方案：1、加入display: inline样式；2、把左右外边距改为左右内边距

7.  图片3px空白

问题描述：靠近浮动元素的元素要么有3px的间距，要么位置偏下

解决方案：给img标签添加vertical-align等相关属性或display: block

8. 边框混乱

问题描述：边框断续，滚动的时候又能连上

解决方案：在边框标签上添加height:100%样式

9.内容消失

问题描述：一部分内容不显示

解决方案：代码简洁、正确地清除浮动

10. 英文不能自动换行

问题描述：当宽度不足时，会破坏布局

解决方案：添加word-wrap: break-word样式

11.层级定位

问题描述：原本应该显示在上的层显示在下

解决方案：给要显示在上的层一个更高的z-index值

12.  文本框底边不显示

问题描述：设置了边框的文本框在触发焦点事件的时候，底边不显示

解决方案：结构标签中是否引用了overflow: hidden样式，去除即可

13. 触发 hasLayout 的空块级非替换元素的高度不是 0

问题描述:本不应该有高度的空元素有了高度

解决方案：1、给空块级非替换元素添加一段空的注释；2、不使用如zoom:1或overflow:hidden;等会触发hasLayout的属性

14. 元素a中link、visited、hover和active等伪类表现不一致

问题描述：在设置了以上四者的样式时，表现不一致

解决方案：应按照L-V-H-A的顺序进行声明

15. 不支持png24的图片格式

问题描述：使用png24的图片格式，透明度不被支持

“times=”” roman””=””>格式改为png8或gif格式16. 不支持除a标签之外的其他标签的hover伪类

问题描述：在非a元素上使用了hover 伪类后，移动无法发生任何效果

解决方案：使用js代码实现

17. 不支持max-width\min-width属性

18.不支持子选择器、相邻选择器、属性选择器

19.不支持透明度opacity

20.Ie6 !important忽略

IE6和360公共Bug

1.样式word-wrap:break-word;对宽度的影响

问题描述：在body元素上添加word-wrap:break-word;样式解决英文无法自动换行，但是360和ie6对宽度的解析会出问题

解决方案：去除body里的word-wrap:break-word;样式

2. 对text-align:center;的解析不一致

问题描述：当ul标签里只有一个li标签，而文本居中样式写在ul里，显示会不一致

解决方案：文字居中样式应该放在自身标签上，而不应该放在父级标签上

3.层级定位不一致

问题描述：层级定位的参照层选择不合理，会导致定位不一致的情况

解决方案：定位层应该放在最近的包含块上

4.无内容标签在引用样式的时候同样显示效果

解决方案：去除无内容标签结构

5.浮动不设宽度错位

问题描述：给元素设置浮动，不设置宽度，当宽度不足以放下内容时会错位

解决方案：可以通过加入white-space:nowrap;样式解决

前端开发好用的动画插件 firefox 前端开发插件 浏览器前端开发插件