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; 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小最小高度问题;*/ }

你可能感兴趣的:(html5,css,css3)