关于兼容IE6的一些解决办法

最新推荐文章于 2021-02-19 14:15:43 发布

郑智勇

最新推荐文章于 2021-02-19 14:15:43 发布

阅读量692

点赞数

分类专栏： HTML+CSS 文章标签： ie 6 html bug css

本文链接：https://blog.csdn.net/qq_35113385/article/details/53054561

版权

HTML+CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

本文主要探讨了在前端开发中遇到的IE6兼容性问题，包括布局杂乱、横向元素掉落、图片间隙、双倍浮向、默认高度等常见问题，提供了一系列CSS Hack方法进行修复，如使用overflow:hidden;、display:block;、clear:both;等。同时，文章提到了HTML5标签在IE9以下版本的不支持及解决方法，强调了掌握这些技巧对于解决浏览器兼容性问题的重要性。

摘要由CSDN通过智能技术生成

小编作为一个初入前端还没踏进门的半路出家的和尚，深为未来的道路感到担忧。决定把一些近期发现问题与解决的方法写出来，以备以后的道路复习之用。

本人开始学习HTML+CSS书写了一些静态电商网站，近期研究IE6兼容性问题，发现自己书写代码也有很大的问题，书写格式不严谨。通过兼容IE6调整后，逐渐改善。现写一些常见IE6问题，望各位大牛不喜勿喷。

A.发现的问题与解决方案

0.发现在IE6条件下布局杂乱，首先在乱的地方书写overflow:hidden;属性，查看是否正常

1.横向排布的块级元素掉落，首先考虑是宽度问题，仔细审查元素，DIV IMG等里面嵌套各种标签有无超出像素，导致超出宽度掉落下一行。

其次考虑是否因为浮动，双倍边距Margin导致问题。（这里有一个小窍门是：可以给最大的盒子设置背景颜色，以方便审查当中各元素宽度高度等问题）

2.书写代码，发现浏览器解析多出空标签a。首先检查代码是否是因为有a标签没有结束闭合标签，其次是看是否因为a标签套用未命名导致浏览器解析异常，最后查看代码是否遵守W3C规定，行内元素A不能嵌套块级元素DIV；导致浏览器解析异常。(如需使用，最好添加display:block;只有html 4阶段把标签归类为inline标签和block标签）

B.IE6常见CSS解析Bug及hack

1)图片间隙

A)div中的图片间隙(该bug出现在IE6及更低版本中)

描述：在div中插入图片时，图片会将div下方撑大三像素。

hack1:将</div>与<img>写在一行上；

hack2:将<img>转为块状元素，给<img>添加声明：display:block;

B)dt,li中图片间隙（IE6）

hack:将<img>转为块状元素，给<img>添加声明：display:block;

2) 双倍浮向（双倍边距）

描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加倍显示。

hack:给浮动元素添加声明：display:inline;

3)默认高度（IE6）

描述：在IE6及以下版本中，部分块元素拥有默认高度（低于16px高度）

hack1:给元素添加声明：font-size:0;

hack2：给元素添加声明：overflow:hidden;

4)表单元素行高不一致(IE,MOZ,C,O,S)

描述：表单元素行高对齐方式不一致

hack:给表单元素添加声明：float:left;

5)按钮元素默认大小不一致

描述：各浏览器中按钮元素大小不一致

hack1：统一大小/（用a标记模拟）

hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。

hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

6)浏览器解析按钮边框时，会把边框解析在按钮内部，不会影响按钮的原有大小

7）在IE6及更低版本的浏览器里，如果想去掉input的默认边框，需将其border属性值设置成0方可兼容多个浏览器。

8)百分比bug
描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。

hack:给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。

clear:left:清除左浮动
clear:both:清除两边的浮动

9)列表阶梯BUG（IE6及更低版本的浏览器中）

bug1:在给的子元素中使用了Float:left;父元素中没有设置浮动属性，会出现垂直效果;

hack:给父元素设置浮动便能解决此问题

bug2:当给LI里的A转成块元素，并设置了固定高度时，且写了浮动后在IE6及更低的版本浏览器里会出现LI阶梯状效果。

hack:给LI也同设置左浮动便可解决。

10）margin-top传递

bug:子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top的属性值添加给父元素.

hack1:给父元素添加overflow:hidden；声明。

*:如果子元素设置了浮动属性也不会出现这个问题。

11）
在ie6下1px的dotted有问题，可以用图片代替 border-image

12）H5标签不支持ie9以下版本浏览器

H5标签：
<header>定义页面或区段的头部；
<footer>定义页面或区段的尾部；
<nav>定义页面或区段的导航区域；
<section>页面的逻辑区域或内容组合；
<article>定义正文或一篇完整的内容；
<aside>定义补充或相关内容；

hack1:引用html5shiv.js帮助解决
<script src="js/html5shiv.js"></script>

13）
两个结构并列的盒子，第一个盒子浮动后，第二个盒子加margin-left值（盒子宽度），第一个盒子在IE6下会有间隙问题

hack1：不建议这么写，用浮动解决

14）
IE6下子元素超出父级宽高，会把父级的宽高撑开

hack1：子元素高度不要超过父级高度，或者给父级元素overflow：hidden;

15）IE6不识别inline-block属性值，采用IE私有的zoom来解决问题。

注：
*属性过滤器
当在一个属性前面增加了*后，该属性只能被IE7及以下版本浏览器识别，其它浏览器忽略该属性的作用。
语法：选择符{*属性：属性值；}

hack1：*display: inline;*zoom:1;

zoom：1；属性是IE浏览器的专有属性，它可以设置或检索对象的缩比例。(在属性前面添加*,意思只有IE6识别属性)

16）Li中的元素都浮动，在IE6，IE7下方会产生4px间隙

hack1：针对ie6、7使用hack给li添加vertical-align

hack2：给li加float

17）两个浮动元素中间有注释或者内嵌元素并且和父级宽度相差不超过3像素，文字就被复制.

Hack1：去掉注释，或者去掉宽度

18）下划线属性过滤器当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
语法：选择符{_属性：属性值；}

19）
\9：IE浏览器组（除了IE11）语法：选择符{属性：属性值\9;}

\0:IE8 包括IE8 语法：选择符{属性：属性值\0;}只有IE8以上浏览器起作用

+：ie7 IE7 以下(包括IE7) 语法：选择符{+属性：属性值;}

：root选择器除了IE8及更早的浏览器语法：:root 选择符{属性：属性值;}

_；_IE6及ie6的ie浏览器认识语法：: 选择符{属性：_属性值;}

（CSS Bug:
CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

CSS Hack:
CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。

Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

*使用Hack带来的一些副作用

降低了CSS代码的可读性，增加了代码的负担。

*设计CSS Hack和 Filter通常有两种方法

1)一种是利用浏览器自身的Bug，来隐藏或显示样式或声明；
2)另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。）

最后，征服了IE6就等于征服了所有浏览器。小编初入前端，部分解决方案以百度为准，书写错误勿怪