HTML5 IE浏览器各版本兼容处理办法

最新推荐文章于 2021-06-09 23:56:39 发布

软哈哈

最新推荐文章于 2021-06-09 23:56:39 发布

阅读量793

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_40198420/article/details/103081255

版权

兼容相关问题

在使用HTML5时,低版本的浏览器会出现兼容问题(一般是ie5.6 ,8)

小高度问题(在ie6及以下版本，会有小高度问题)
当页面中有一个div时,给这个份div设置高度1px,背景颜色,在ie6及以下版本会出现1px高度失效,页面div高度变高

(前面效果在谷歌浏览器,后面的是ie6以及以下)
ie6及以下浏览器

<style>
	    .box{
	        height: 1px;
	        background: red;
	     }
</style>

解决办法:

 .box{
        height: 1px;
        background: red;
        //给这个元素设置
        font-size: 0;
        line-height: 0;
        overflow: hidden;
   }

双边距问题(在ie6及以下版本)
给元素设置浮动，再设置margin-left，最左侧的元素会出现双倍的margin-left值
(前面效果在谷歌浏览器,后面的是ie6以及以下)

 div{
       width: 100px;
       height: 100px;
       background: pink;
       float: left;
       margin-left: 50px;
	}

解决办法：给元素设置

_display:inline;

块转内联块不在同一行显示(在ie7及以下版本)
给块元素设置转内联块，不在同一行显示
(前面效果在谷歌浏览器,后面的是ie7及以下)

 div{
       width: 50px;
         height: 50px;
         background: red;
         border:1px solid black;
         display: inline-block;
	}

解决办法：给元素设置

*display:inline;
*zoom:1;

子元素相对定位，父元素溢出隐藏失效问题(在ie6 7里 )
给子元素设置相对定位，给父元素设置溢出隐藏，溢出隐藏失效
(前面效果在谷歌浏览器,后面的是ie)

<style>
        .father{
            width: 150px;
            height: 70px;
            background: red;
            overflow: hidden;
        }
        .son{
            width: 80px;
            height: 100px;
            background: yellow;
            position: relative;
        }
</style>

body代码:

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

解决办法：给父元素也设置

position: relative;

li的子元素里有两个或两个以上浮动的时候，会出现空白间隙问题(ie7及以下)
(前面效果在谷歌浏览器,后面的是ie)

li{
    width: 300px;
     border: 1px solid red;
     height: 30px;
}
a{float: left;}
span{float: right;}

body代码:

 <ul>
        <li>
            <a href="#">哈哈哈</a>
            <span>2019年10月8日</span>
        </li>
        <li>
            <a href="#">哈哈哈</a>
            <span>2019年10月8日</span>
        </li>
    </ul>

解决办法：给li设置vertical-align: top/middle/bottom;

图片外面蓝圈问题(ie8及以下)
图片外面包a标签，图片就会出现蓝圈
(点击后前面效果在谷歌浏览器,后面的是ie)

解决办法：

 img{ border: none;}

不透明度(opacity和rgba 在ie8及以下都不兼容)
(前面效果在谷歌浏览器,后面的是ie)

opacity兼容的处理办法：

opacity: 0.5;
filter: alpha(opacity=50);

三角形设置transparent的边框是黑色(ie6 7)
(前面效果在谷歌浏览器,后面的是ie)

 .box{
         width: 0;
         border-left: 100px solid red;
         border-top: 100px solid transparent;
         border-bottom: 100px solid transparent;
         font-size: 0;
         line-height: 0;
   	}