兼容相关问题

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

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

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

HTML5 浏览器兼容范围 html5浏览器兼容性解决方法_ci

HTML5 浏览器兼容范围 html5浏览器兼容性解决方法_HTML5 浏览器兼容范围_02

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

解决办法:

.box{
        height: 1px;
        background: red;
        //给这个元素设置
        font-size: 0;
        line-height: 0;
        overflow: hidden;
   }
  1. 双边距问题(在ie6及以下版本)
    给元素设置浮动，再设置margin-left，最左侧的元素会出现双倍的margin-left值
    (前面效果在谷歌浏览器,后面的是ie6以及以下)
div{
       width: 100px;
       height: 100px;
       background: pink;
       float: left;
       margin-left: 50px;
	}

解决办法：给元素设置

_display:inline;
  1. 块转内联块不在同一行显示(在ie7及以下版本)
    给块元素设置转内联块，不在同一行显示
    (前面效果在谷歌浏览器,后面的是ie7及以下)
div{
       width: 50px;
         height: 50px;
         background: red;
         border:1px solid black;
         display: inline-block;
	}

解决办法：给元素设置

*display:inline;
*zoom:1;
  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;
  1. 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;

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

    解决办法：
img{ border: none;}
  1. 不透明度(opacity和rgba 在ie8及以下都不兼容)
    (前面效果在谷歌浏览器,后面的是ie)

opacity兼容的处理办法：

opacity: 0.5;
filter: alpha(opacity=50);
  1. 三角形设置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;
   	}

解决办法：把边框样式设置成虚线 dashed