<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.mytest{
width:100px;
height:1px;
border:1px solid red;
font-size:0px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="mytest"></div>
</body>
</html>
IE6浏览器下如何设置div的高度:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
在IE6浏览器下,我们可能无法随心所欲的设置一个div的高度,因为在IE6浏览器下,div的高度好像和字体大小联系在一起的,如果你不设置字体的大小,那么将无法将div的高度设置到小于12px的尺寸。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.mytest{
width:100px;
height:5px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="mytest"></div>
</body>
</html>
以上在代码在标准浏览器下,是正常的,但是在IE6浏览器下,无法将div高度设置为5px,高度依然是12px。解决方法就是将div的字体大小设置为0px,然后即可设置更小的高度了,但是最小高度只能够设置到2px。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.mytest{
width:100px;
height:1px;
border:1px solid red;
font-size:0px;
}
</style>
</head>
<body>
<div class="mytest"></div>
</body>
</html>
如果想让div在IE6下高度可以随意设置的话,则需要添加overflow:hidden。例如: