IE6,7下的那些坑

最新推荐文章于 2020-06-18 15:55:22 发布

wanzhuan2010

最新推荐文章于 2020-06-18 15:55:22 发布

阅读量742

点赞数

分类专栏： Web前端文章标签： CSS CSS3 html5

本文链接：https://blog.csdn.net/wanzhuan2010/article/details/45816875

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.双边距问题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .warp {
            border: 10px solid #000000;
            width:300px;
            height: 100px;
        }
        .box{
            background: red;
            height: 100px;
            width:100px;
            margin:0px 100px;
        }
    </style>
</head>
<body>
<div class="warp">
    <div class="box"></div>
</div>
</body>
</html>

在IE6 ,IE7,IE8,Chrome,FireFox显示效果:
这里写图片描述

当使box元素为浮动元素时

  .box{
            background: red;
            height: 100px;
            width:100px;
            margin:0px 100px;
            float: left;/*使成为浮动元素*/
        }

在IE6 下显示效果:
这里写图片描述

会发现,在IE6下的box元素的两边边距增加一倍,这就是IE6下的双边距问题,

解决办法

.box{
            background: red;
            height: 100px;
            width:100px;
            margin:0px 100px;
            float: left;
            display: inline; /*块级元素转换成行内元素*/
        }

二.IE6下最小高度问题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            height: 1px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在IE7以上,Chrome,FireFox下显示效果:
这里写图片描述
但在IE6中显示效果:

发现,在IE6中会有19个像素的高度
解决办法:

 .box {
            height: 1px;
            border: 1px solid red;
            width: 300px;
            font-size: 0; /*IE6最小高度为2px*/
            overflow: hidden; /*解决IE6小最小高度问题;*/
        }

wanzhuan2010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE6,7下的那些坑

一.双边距问题<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .warp { border: 10px solid #000000; width:300px
复制链接

扫一扫

专栏目录