IE6浏览器下设置div的高度

最新推荐文章于 2023-01-02 20:20:05 发布

yeyuehunluhongyu

最新推荐文章于 2023-01-02 20:20:05 发布

阅读量773

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： web前端

本文链接：https://blog.youkuaiyun.com/yeyuehunluhongyu/article/details/46812467

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在IE6浏览器中设置DIV高度的问题及解决方案。由于IE6限制未定义字体大小的DIV最小高度为12px，通过将字体大小设为0px并使用overflow:hidden属性，可使DIV高度设置更加灵活。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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。例如: