解决IE6双倍边距bug问题

出现双边距一般都是在排版中遇到的问题。

IE6 的双倍边距bug:

在IE6中,当为一个向左浮动的元素添加左外边距,或者为一个向右浮动的元素添加右外边距时,

这个外边距值将会是设置的值的两倍

举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双倍边距问题</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            float: left;
            margin: 100px;
            /*解决IE6中的这个问题:*/

            /*
            * 添加一个样式来解决,对于浮动元素来说设置display:inline没有任何意义
            *  但是该属性可以解决IE6的双倍边距问题
            */


            display: inline;
        }


    </style>
</head>
<body>
<div class="box1">

</div>

</body>
</html>

IE6是这样子

谷歌、火狐和IE6以上版本是这样子

 

 

明显是比设置的边距值大了,仔细量的话,就是设置值的两倍

解决IE6中的这个问题:

                添加一个样式来解决,对于浮动元素来说设置display:inline没有任何意义

                但是该属性可以解决IE6的双倍边距问题

设置完这个属性在IE6中就可以正常显示啦!

 

 

发布了11 篇原创文章 · 获赞 2 · 访问量 91

猜你喜欢

转载自blog.csdn.net/qq_42383764/article/details/103684438