当前位置：网站首页>关于IE6浏览器出现的问题的解决

关于IE6浏览器出现的问题的解决

2022-07-21 18:09:00 【益达木咸醇】

关于IE6浏览器出现的问题的解决

1、IE6双边距问题：
html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>IE6兼容性</title>
    <style> *{
     margin: 0;padding: 0;} li{
      list-style: none; width: 200px; height: 200px; background-color: red; margin: 0 10px; float: left; } </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

运行后在chrome浏览器的截图：
在这里插入图片描述
由于我这里没有安装IE浏览器测试的工具，在这里用截图工具标注一下：
在这里插入图片描述
在上面这个图中，IE6浏览器中这里的第一个红块会大一些（距离左边是20px），但我代码中是margin：0 10px;，正确的应该是第一个红块居左10px，这是IE6浏览器的双边距问题，解决方法，加入display:inline;

li{
    
            list-style: none;
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 0 10px;
            float: left;
            display: inline;     /*解决关键代码*/
        }

2、IE6默认高度问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>IE6兼容性</title>
    <style> *{
     margin: 0;padding: 0;} div{
      height: 10px; background-color: red; } </style>
</head>
<body>
    <div></div>
    111111111
</body>
</html>

运行后在chrome的结果
在这里插入图片描述
但是在IE6浏览器运行的话大概height:16px; 这是因为IE6默认会将低于16px的高度解析成16px，解决：

 div{
    
           height: 10px;
           background-color: red;
           font-size: 0;   /*或者overflow:hidden*/
       }

3、a标签包含img标签的问题（不只是IE6,IE浏览器都存在的问题）：

<a href="#"><img src="" alt=""></a>

以上这种代码形式（a包含img），用IE浏览器运行的话会出现边框，解决：
在css样式中设置a标签下的img样式：

img{
    border: 0;/*或者none也行*/}
原网站

版权声明
本文为[益达木咸醇]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_45766506/article/details/106515357

边栏推荐

猜你喜欢

随机推荐