在实际应用中为了特殊的需要而用到一个空的DIV,并定义一个较小的高度值．通常的想法见下面代码： html<div></div>cssdiv{height:5px;} 以上代码在多数浏览器中都可正确显示，但我们在实际运用中，确不象理论上这么简单，特别的IE6中并非如你所想，好象有时可以定义高度，有时它就不知何原因失效了！ 先给出我的测试代码，然后在详细说明： <!DOCTYPE <a href="https://www.gaodaima.com/tag/html" title="查看更多关于html的文章" target="_blank">html</a> PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html</a> xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head><meta" rel="nofollow">http://www.w3.org/1999/xhtml”><head><meta</a> http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><title>无标题文档</title><style type=”text/<a href="https://www.gaodaima.com/tag/css" title="查看更多关于css的文章" target="_blank">css</a>“>h3{margin:10px 0;padding:0;}body{background:white; color:black; font-size:12px;}.content{width:400px;border:solid 1px red;}p{color:black;background:green;margin:0;padding:0;}.t{height:6px;width:600px;background:red;}.b{width:200px; background:#000;height:5px;}.b0{background:#000; font-size:0px;}.b1{width:200px; background:#000; font-size:1px;}.b2{width:200px; background:#000; font-size:2px;}.b3{width:200px; background:#000; font-size:3px;}.b4{width:200px; background:#000; font-size:4px;}.b5{width:200px; background:#000; font-size:5px;}.b6{width:200px; background:#000; font-size:6px;}.b7{width:200px; background:#000; font-size:7px;}.b8{width:200px; background:#000; font-size:8px;}.b9{width:200px; background:#000; font-size:9px;}.b10{width:200px; background:#000; font-size:10px;}.b11{width:200px; background:#000; font-size:11px;}.b12{width:200px; background:#000; font-size:12px;}</style></head><body><h2>空DIV在IE6浏览器中的不同表现形式</h2><h3>一．空DIV无样式时的表现</h3><div class=”content”> <p>something</p> <div></div> <p>something</p></div><h3>二．空DIV加入宽度后的表现</h3><div class=”content”> <p>something</p> <div class=”b”></div> <p>something</p></div><h3>二．空DIV加入宽度＋字体后的表现</h3><h3>0.空DIVfont-size:0px;实际height=2px;</h3><div class=”content”> <p>something</p> <div class=”b0″></div> <p>something</p></div><h3>1.空DIVfont-size:1px;实际height=2px;</h3><div class=”content”> <p>something</p> <div class=”b1″></div> <p>something</p></div><h3>2.空DIVfont-size:2px;实际height=2px;</h3><div class=”content”> <p>something</p> <div class=”b2″></div> <p>something</p></div><h3>3.空DIVfont-size:3px;实际height=4px;</h3><div class=”content”> <p>something</p> <div class=”b3″></div> <p>something</p></div><h3>4.空DIVfont-size:4px;实际height=5px;</h3><div class=”content”> <p>something</p> <div class=”b4″></div> <p>something</p></div><h3>5.空DIVfont-size:5px;;实际height=5px;</h3><div class=”content”> <p>something</p> <div class=”b5″></div> <p>something</p></div><h3>6.空DIVfont-size:6px;实际height=6px;</h3><div class=”content”> <p>something</p> <div class=”b6″></div> <p>something</p></div><h3>7.空DIVfont-size:7px;实际height=8px;</h3><div class=”content”> <p>something</p> <div class=”b7″></div> <p>something</p></div><h3>8.空DIVfont-size:8px;实际height=10px;</h3><div class=”content”> <p>something</p> <div class=”b8″></div> <p>something</p></div><h3>9.空DIVfont-size:9px;实际height=12px;</h3><div class=”content”> <p>something</p> <div class=”b9″></div> <p>something</p></div><h3>10.空DIVfont-size:10px;;实际height=12px;</h3><div class=”content”> <p>something</p> <div class=”b10″></div> <p>something</p></div><h3>11.空DIVfont-size:11px;实际height=14px;</h3><div class=”content”> <p>something</p> <div class=”b11″></div> <p>something</p></div><h3>12.空DIVfont-size:12px;;实际height=15px;</h3><div class=”content”> <p>something</p> <div class=”b12″></div> <p>something</p></div></body></html>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code) type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</p> <p> 分析：从代码中我总结了一些知识点</p> <p> 1.当一个空DIV只给高度时，它的高度在IE6下是可控的．一些元素如background-color,border…都不会影响高度的值；</p> <p> 2.如样式中有了height的话那IE会默认会有一个高度，其它的值如zoom:1也会产生这个＂layout＂可以自己尝试测试其它样式；</p> <p> 3.空DIV如果付与了一个＂layout＂的话，那么它的高度就与文字大小有关了，具体的文字大小所显示的实际高度值从测试页中可见；</p> <p> 4.可以看出IE所能显示的文字的最小高度值为2PX；</p><div><div class="_t33rkthes8f"></div><script type="text/javascript">(window.slotbydup = window.slotbydup || []).push({id: "u6795179",container: "_t33rkthes8f",async: true});</script></div> <p> 5.在实际解决问题中，我们就根据它的特点，因材施教，在样式中加入font-size:数值；如果height:12px;那么你的font-size要小于等于10px,也就是最大值可取到10px;在大的话会被文字撑开（撑开内容是IE6以下版本的一个BUG），所以最省事的方法也就是设置文字大小为0；</p> <p>以都是用设字体大小的办法解决问题，有的人还要加入一个行高，经测试行高对高度没有影响．所以加入行高没有必要．</p> <p> 第二个解决问题的方法是加入overflow:hidden;思路就是超出部分隐藏起来，这也是一个很好的方法！</p> <p> 说了那么多，我们只是的用测试的手段来分析一下总结出它的规律，当做一个技术研究，这样印象也深入一些，其实就两种方法，你只要记住这两种方法就可以了．</p> <p>第一种方法：</p> <p>div{<br />font-size:0;/*关于单位的写法是：如果是0值就可以不用写单位，非0值要写单位；（你同样可以写为0px．）*/<br />}</p> <p>第二种方法</p> <p>div{<br />overflow:hidden;<br />}</p> <p>purecss语：让我们一起在这里成长起来！祝每位看这篇文章的网友学习进步！</p> <p>欢迎大家阅读<span style='color:red;'>《CSS布局中DIV为空时在IE6的不同表现_css》</span>,跪求各位点评,若觉得好的话请收藏本文，by <strong>搞代码</strong></p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/21825.html" target="_blank" title="CSS布局中DIV为空时在IE6的不同表现_css">CSS布局中DIV为空时在IE6的不同表现_css</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="21825" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> <div class="article-tags"><i class="fa fa-tags"></i><a href="https://www.gaodaima.com/tag/css" rel="tag">css</a><a href="https://www.gaodaima.com/tag/html" rel="tag">html</a></div></footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/432144.html" title="Java中如何调用静态方法及非静态方法呢？" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/1.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java中如何调用静态方法及非静态方法呢？" /><br><span class="r_title">Java中如何调用静态方法及非静态方法呢？</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432139.html" title="Java基础类型占用大小说明" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/7.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java基础类型占用大小说明" /><br><span class="r_title">Java基础类型占用大小说明</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432069.html" title="入门：建立百度浏览器应用 -百度浏览器应用开发文档" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=/wp-content/uploads/images/gaodaima/com/hct/1110/u2dwagmxppa582738.png&h=110&w=185&q=90&zc=1&ct=1" alt="入门：建立百度浏览器应用 -百度浏览器应用开发文档" /><br><span class="r_title">入门：建立百度浏览器应用 -百度浏览器应用开发文档</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432051.html" title="scrapy提取数据之：xpath选择器_Scrapy1.5中文文档_Scrapy 中文网" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=/wp-content/uploads/images/gaodaima/com/hct/1110/14twor0h15l072982.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="scrapy提取数据之：xpath选择器_Scrapy1.5中文文档_Scrapy 中文网" /><br><span class="r_title">scrapy提取数据之：xpath选择器_Scrapy1.5中文文档_Scrapy 中文网</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431438.html">Flask框架如何使用HTML模板</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431362.html">django怎么加载html页面</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431346.html">django需要html吗</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431265.html">django如何用css</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431258.html">Django 模板中使用css, javascript</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431256.html">Django怎么加载HTML</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431212.html">django怎么创建css文件夹</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431179.html">django页面跳转HTML怎么写</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><!-- 多条广告如下脚本只需引入一次 --><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"> 提交评论 评论通知 表情 贴图 加粗 删除线 居中 斜体 签到