首页 / HTML / IE6的兼容问题 ———HTML基础学习

IE6的兼容问题 ———HTML基础学习

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了IE6的兼容问题 ———HTML基础学习，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2853字，纯文字阅读大概需要5分钟。

内容图文

同学们经常在制作网页的时候，会遇到ie6的兼容问题，下面这篇文章可以帮助大家规范代码和解决ie6中常见的一些兼容问题。

浏览器的兼容问题

浏览器兼容问题可以认为是相同的代码（css,js）在不同的浏览器中执行会产生不同的效果。

中国常见的3大内核：

IE内核： IE浏览器、360浏览器（兼容模式）

Chrome内核：Chrome、360浏览器（极速模式）、搜狗浏览器、腾讯TT浏览器、百度浏览器、傲游浏览器

火狐内核：firefox浏览器

css hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

_ 这个就是css hack

以上是通过css hack去解决ie的兼容问题

IE浏览器各版本 CSS hack 对照表

IE6的兼容问题 ———HTML基础学习 - 文章图片

_color 比如_color中只会用ie6浏览器执行这句代码。

1）IE6对于微型盒子（高度小于等于18px的盒子）显示是有问题的，它总会维持高度18px；解决办法就是设置font-size:0; 

原因:

IE6的渲染机制是以文字为本，总是试图让盒子的高度至少有内部文字的大小。我们声明内容文字大小为0，就好了。

IE6的兼容问题 ———HTML基础学习 - 文章图片

列子：

IE6的兼容问题 ———HTML基础学习 - 文章图片

2)盒子的半透明

Opacity。值为1的时候，表示完全不透明；0表示盒子不可见，完全透明。

但是在ie6中也有兼容性。

使用：_filter:alpha(opacity=72);解决兼容问题

3)overflow:hidden来清除浮动，对IE6有兼容性问题。

解决方法：zoom是IE浏览器中的一个属性（不是W3C的属性），用于控制显示倍数。这个属性用于控制页面中的任何元素显示倍数的。

但是在这里我们借助zoom这个属性，设置1，盒子不会放大也不会缩小，但是会触发一个hasLayOut机制（有兴趣的同学可以百度）。

在有hasLayOut机制的情况下，IE浏览器可以用overflow:hidden，_zoom:1来清除浮动的影响。

4）双倍margin问题

当一个浮动的盒子中，有连续的浮动的子盒子，（看marigin的方向，margin为左就是第1项，margin为右是最后项）的margin将会双倍。


1*{
2                padding: 0;
3                margin: 0;
4            }
5            ul{
6                float: left;
7                border:1px solid red;
8                list-style: none;
9            }
10            ul li {
11                float: left;
12                background:blue;
13                margin-left: 50px;  
14            }
15        </style>
16    </head>
17    <body>
18        <ul>
19            <li>项目文字</li>
20            <li>项目文字</li>
21            <li>项目文字</li>
22            <li>项目文字</li>
23            <li>项目文字</li>
24            <li>项目文字</li>
25        </ul>
26    </body>
</html>
解决方法：
1. 给第一个（或者最后一个）元素，单独的class，设置为一半的margin即可。
2. 给浮动的父盒子添加 zoom：1，触发hasLayOut机制。
  给浮动的子元素加上inline即可 _display:inline;
IE6的兼容问题 ———HTML基础学习 - 文章图片

5)图片的边框

IE6、7中，所有有链接的图片，都默认有难看的边框:

<a href=”#”><img src=”” /></a>

IE6的兼容问题 ———HTML基础学习 - 文章图片

  解决方法：

    img{

        border: none;

      }

6) IE6在不加<!DOCTYPE >文档声明头的时候，会用自己的理解处理盒模型。由“外扩”变成“内减”。Margin居中会失效。

解决办法：添加文档声明头<!DOCTYPE >

正常情况

不加文档声明头<!DOCTYPE >
IE6的兼容问题 ———HTML基础学习 - 文章图片 IE6的兼容问题 ———HTML基础学习 - 文章图片

内容总结

以上是互联网集市为您收集整理的IE6的兼容问题 ———HTML基础学习全部内容，希望文章能够帮你解决IE6的兼容问题 ———HTML基础学习所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/995331.html

来源：【匿名】