Html CSS 调试帮助 - 空 div 折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2212861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Debugging help - empty div collapsing
提问by Hcabnettek
The following HTML is from an aspx page. This is in regards to to the first child DIV element. In IE7 the HTML renders as I would expect even when that DIV element is empty. It should be approximately 1/3 the width of it's parent, but in FireFox it is collapsing to zero width. All 3 divs are floated left. Anyways, my question is how do I keep the empty DIV's width at 32% in FireFox at least, and preferably Safari, Opera, and Chrome. I'm hoping the fix will correct the problem in all the browsers. It's no doubt the cause is my lack off CSS knowledge combined with the likely incorrect rendering of IE7. Its probably behaving correctly. Can anyone help me correct this problem?
以下 HTML 来自 aspx 页面。这是关于第一个子 DIV 元素的。在 IE7 中，即使该 DIV 元素为空，HTML 也会按照我的预期呈现。它应该大约是其父级宽度的 1/3，但在 FireFox 中它会折叠为零宽度。所有 3 个 div 都向左浮动。无论如何，我的问题是如何至少在 FireFox 中将空 DIV 的宽度保持在 32%，最好是在 Safari、Opera 和 Chrome 中。我希望此修复程序可以解决所有浏览器中的问题。毫无疑问，原因是我缺乏 CSS 知识，加上 IE7 的渲染可能不正确。它可能行为正确。谁能帮我纠正这个问题？
<div style="padding-left: 4px ! important; overflow: auto; width: 96% ! important;" class="fullwidthdiv">
<div style="width: 32% ! important;" class="oneThirdColumn"></div>
<div style="width: 32% ! important;" class="oneThirdColumn">
$<input type="text" style="width: 70px;" class="underlinedTextBox updateReserveAmount" tabindex="123" id="ctl00_DefaultContent_payment1_paymentfrmView_updateReserveAmount" maxlength="11" name="ctl00$DefaultContent$payment1$paymentfrmView$updateReserveAmount">
</div>
<div style="width: 32% ! important;" class="oneThirdColumn">
<input type="submit" style="width: 120px;" class="updateReserve" tabindex="124" id="ctl00_DefaultContent_payment1_paymentfrmView_btnReserve" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$DefaultContent$payment1$paymentfrmView$btnReserve", "", true, "", "", false, false))" value="Update Reserve" name="ctl00$DefaultContent$payment1$paymentfrmView$btnReserve">
</div>
</div>
回答by Guffa
It's not the width that is the problem, it's the height.
问题不是宽度，而是高度。
If you don't have any content in the div, the height becomes zero. However, there is a well known bug in IE, where it makes the content of all elements at least one character high.
如果 div 中没有任何内容，则高度为零。但是，IE 中有一个众所周知的错误，它使所有元素的内容至少高一个字符。
You can specify a height for the div, or you can put a in it when you don't have anything else to put there.
你可以为 div 指定一个高度，或者 当你没有其他东西可以放在那里时，你可以在里面放一个。
回答by Chris Conway
I know this is a little old, but what I did was add a min-height style like this:
我知道这有点旧，但我所做的是添加一个像这样的最小高度样式：
.oneThirdColumn {
min-height: 1em;
}
回答by Y.B.
I had a similar problem with <span>in FireFox (at least 47.0.2 and 50).
我<span>在 FireFox 中遇到了类似的问题（至少 47.0.2 和 50）。
Fixed with the following CSS: span:empty:before {content: '\a0';}.
使用以下 CSS 修复：span:empty:before {content: '\a0';}.
That would add one before <span>contents if empty onlyand would not affect the layout of elements that have some text or children.
如果仅为空，则会 在<span>内容之前添加一个，并且不会影响具有某些文本或子项的元素的布局。
回答by Patanjali
The simple fix is applying the {overflow:auto}css to the empty (or potentially empty) element, as described in Everything You Never Knew About CSS Floats > Clearfix To The Rescue
简单的修复是将{overflow:auto}css应用到空（或可能为空）元素，如你所不知道的关于 CSS 浮动 > Clearfix To The Rescue 中所述
Note that this will end up hiding any absolutely elements parented by the element to which the css is applied that are positioned outside the parent. That is sort of expected, given what overflowapplies to.
请注意，这最终将隐藏由应用 css 的元素作为父元素的所有绝对元素，这些元素位于父元素之外。考虑到overflow适用的情况，这在意料之中。
The three examples show:
这三个例子表明：
- Lines with floats, with outlying numbering, but no
{overflow:auto}. - Same lines, but with
{overflow:auto}. - Same lines with no
{overflow:auto}, but with a final non-breaking space.
- 带有浮点数的行，带有外围编号，但没有
{overflow:auto}. - 相同的行，但带有
{overflow:auto}. - 与 no 相同的行
{overflow:auto}，但最后一个不间断的空格。
p{position:relative;margin-left:2em;background-color:lightgrey}
p.Clear{overflow:auto}
span{display:inline-block}
p>span:first-child{position:absolute;left:-1.5em}
.Left{float:left}
.Right{float:right}<h3>Lines with no p{overflow:auto}</h3>
<p>Lines have outlying custom numbering.</p>
<p><span>1</span><span class="Left">[Float left 1.-------------------------------------------------------------]</span>Line 1 plain non-float content that forces right float below element.<span class="Right">[---------------------------------------------------Float Right 1.]</span></p>
<p><span>2</span><span class="Left">[Float left 2.-------------------------------------------------]</span><span class="Right">[--------------------------------------------------Float Right 2.]</span></p>
<p><span>3</span><span class="Left">[Float left 3.---------------------]</span>Line 3 plain content covers collapsed line 2 that has no non-float content, and line 2's floats have disappeared. If the page width is narrow enough, it forces the right float below the element.<span class="Right">[---------------------------------------Float Right 3.]</span></p>
<h3>Same 3 lines with p{overflow:auto}.</h3>
<p>Lines now missing numbering, but all content is now within the elements.</p>
<p class="Clear"><span>1</span><span class="Left">[Float left 1.--]</span>Line 1 plain non-float content.<span class="Right">[--Float Right 1.]</span></p>
<p class="Clear"><span>2</span><span class="Left">[Float left 2.--]</span><span class="Right">[--Float Right 2.]</span></p>
<p class="Clear"><span>3</span>Line 3 plain content not merged into line 2 that has no non-float content.</p>
<p class="Clear"><span>2</span><span class="Left">[Float left.-----------------------------------------------]</span>?<span class="Right">[------------------------------------------------Float Right.]</span></p>
<p class="Clear"><span>4</span><span class="Left">[Float left.-----------------------------------------------]</span>Line 4 plain content fills into collapsed line 3, except for floats.<span class="Right">[------------------------------------------------Float Right.]</span></p>
<h3>Lines with no {overflow:auto}, but ending with a non-breaking space.</h3>
<p>Lines now have numbering, and elements don't collapse, but right floats can drop below the element.</p>
<p><span>1</span><span class="Left">[Float left.-----------------------------]</span>Line 1 plain non-float content.<span class="Right">[--------------------------Float Right.]</span>?</p>
<p><span>2</span><span class="Left">[Float left.----]</span><span class="Right">[-----Float Right.]</span>?</p>
<p><span>3</span><span class="Left">[Float left.-----------------------------------------------]</span><span class="Right">[------------------------------------------------Float Right.]</span>?</p>
<p><span>4</span><span class="Left">[Float left.]</span>Line 3 plain content not merged into line 2 that has non-breaking space content.<span class="Right">[Float Right.]</span>?</p>Run the snippet full page, then resize the browser window smaller to see what happens to the floats relative to the enclosing element.
运行整个页面的代码片段，然后将浏览器窗口调整得更小，以查看相对于封闭元素的浮动会发生什么。
Either {overflow:auto}or a non-breaking space prevents the element collapsing, but only the former prevents any content falling outside the element. However, it kills the display of any absolutely placed content.
无论是{overflow:auto}或者非打破空间防止元素的崩溃，但只有前阻止任何内容属于元素之外。但是，它会杀死任何绝对放置的内容的显示。
My recommendation is to use {overflow:auto}for basic float-containing content.
我的建议是{overflow:auto}用于基本的浮动内容。
If placing content absolutely outside its parent, use a non-breaking space, but only if the floats will NEVER be pushed onto another line.
如果将内容绝对放置在其父级之外，请使用不间断空格，但前提是浮动永远不会被推到另一行上。
Alternatively, using the examples, use {position:relative;padding-left:2em}on the parent, and {position:absolute;left:0.5em}on the fixed content.
或者，使用示例，{position:relative;padding-left:2em}在父级和{position:absolute;left:0.5em}固定内容上使用。
回答by Cee Dub
I've been using padding-top: (insert number)px or %to keep my empty elements from collapsing. Seems to be working fine.
我一直在padding-top: (insert number)px or %用来防止我的空元素崩溃。似乎工作正常。
回答by T.J. Crowder
I suspect it's because of the float. Can you make them display: inline-blockinstead of floating them? But that will probably make IE unhappy, it doesn't like you to inline block elements. Perhaps spans that are display: inline-blockinstead?
我怀疑是因为浮动。你能制作它们display: inline-block而不是漂浮它们吗？但这可能会让 IE 不高兴，它不喜欢你内联块元素。也许spans 是display: inline-block？
