CSS文本底部边距忽略 [英] CSS Text Bottom Margin Ignored
问题描述
好吧，我希望这不是一个简单的监督，但我已经工作了几个小时！
Ok, I hope this isn't a simple oversight but I have been working on this for hours!
我有一个相当复杂的HTML / CSS结构我正在使用的页面。我在页面的底部有一个底部边距为10px的div的文本。该div位于另一个div中，底边距为10像素;。其他div中的div位于链上，直到< body> 。
I have a fairly complex HTML / CSS structure on a page I'm working with. I have text at the very bottom of the page that is in a div with a bottom margin of 10px;. That div is in another div with a bottom margin of 10px;.That div is in other divs on up the chain until <body>.
由于某种原因，文本靠在div的底部，它在里面。我为人们创造了一个最低限度的重现。它确实重现了问题，我只是希望我没有删除任何其他问题，导致的问题。
For some reason the text butts right up against the bottom of the div it is inside. I have created a minimalist repro for people to look at. It does reproduce the problem, I just hope I haven't removed any other issues that are contributory to the issue.
我已经得到它的工作在一个最新的chrome点高度：100％;在某处（我不记得哪里现在），但它没有解决的问题在firefox和ie。这两个浏览器都与CSS的奇怪行为，他们最初显示与正确的底边距大小，但立即跳回，以便文本没有底部边距。这是一个小blip。
I did get it working in the latest chrome at one point with a height: 100%; somewhere in there (I don't remember where now) but it didn't fix the problem in firefox and ie. Both of those browsers had bizarre behavior with that css, they initially displayed with the correct bottom margin size but instantly jumped back down so that the text had no bottom margin again. It was like a little blip.
哦，也在我的重现html ie不显示任何中心（至少ie9）。我希望这不会是一个问题。
Oh, also in my repro html ie isn't displaying anything centered (at least ie9). I'm hoping that won't be a problem. I can certainly fix that issue easily enough myself.
在chrome中，如果你检查元素，它突出显示蓝色的文本div，蓝色的边界框显示div扩展超出
In chrome, if you inspect element it highlights the text div in blue and the blue bounding box shows that the div extends beyond where it is currently being displayed.
这是最低限度的例子： http://www.del337ed.com/repro.html
Here is the minimalist example: http://www.del337ed.com/repro.html
感谢大家的帮助。
推荐答案
添加 overflow：hidden 到 #SubmissionDetails 通过阻止在 div 折叠边距的行为来修复边距问题c>。
Add overflow: hidden to #SubmissionDetails to fix the margin problem by preventing the behaviour of collapsing margins on that div.
将doctype添加为第一行以转义 Quirks模式并在Internet Explorer中修正您的网页：
Add a doctype as the very first line to escape Quirks Mode and fix your page in Internet Explorer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（您也可以使用更短的<！DOCTYPE html& / code>，我只是坚持你的）
(You could also use the much shorter <!DOCTYPE html>, I just stuck with what you had)
做这个改变也将改善其他浏览器的东西（也就是说，它将提高一致性） 。
Making this change will also improve things in other browsers (that is, it will improve the consistency).
这篇关于CSS文本底部边距忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
