前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

前端基础:面试笔试常见的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.也可以引用一段脚本处理(DD_belatedPNG.js).

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,解放前端开发事业,从你我做起!



欢迎关注

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言