ie问题，干货看这篇!前端基础：面试笔试常见的IE兼容问题，幸好现在是移动端的天下

1.hack

2.IE6价格是margin的两倍

结果元素：如果在IE6中为元素设置了浮点，并且设置了margin-left或margin-right，则margin值将翻倍。

解决方法：display：inline；

3.IE6下默认有行高

解决方法：overflow:hidden;或font-size:0;或line-height：xx px；

4.在各个浏览器下img有空隙

产生因素：回车 。解决方法：display：inline；

5. IE6下，min-width/height和 max-width/height没效果

6.li之间有间距

li 设置vertical-align:middle;

7. IE6下，当浮动元素与流动元素并列显示时，他们之间会存在三像素问题

原文：

• IE 6 and below
• Use * html { } to select the html element.
• IE 7 and below
• Use *+html, * html { } to select the html element.
• IE 7 only
• Use *+html { } to select the html element.
• IE 7 and modern browsers only
• Use html>body { } to select the body element.
• Modern browsers only (not IE 7)
• Use html>/**/body { } to select the body element.

例子：

8.当定义行内元素为包含框时，且包含框包含的绝对定位元素以百分比为单位进行定位时，会出现混乱。

解决方法：在行内元素里加入{zoom：1；}

9.当多个浮动元素中间夹杂着HTML注释语句时，如果浮动元素宽度为100%，则在下一行多显示一个上一行最后一个字符。

解决办法：给浮动元素添加display:inline;

10.opacity 定义元素的不透明度

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

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

12.png24位的图片在iE6浏览器上出现背景

解决方案 : 做成PNG8.也可以引用一段脚本处理).

13.IE6中图片的下方会存在一定的缝隙

将img标签定义为display:block或为img对应的样式写入font-size:0。

14. IE6-7不支持display: inline-block

.inline {
display: inline-block;
*display: inline;
*zoom: 1;
}

15.通过为块级元素设置宽度和左右margin为auto时，IE6不能实现水平居中

为父元素设置text-align: center;

---

JavaScript在IE和FF下的兼容性问题

键盘值

事件源

事件监听

XMLHttpRequest

支持放弃IE，解放前端开发事业，从你我做起！

欢迎关注