文章/答案/技术大牛

发布

社区首页 >问答首页 >忽略CSS文本下边距

问忽略CSS文本下边距
EN

Stack Overflow用户

提问于 2011-09-09 21:00:59

回答 3查看 6.4K关注 0票数 4

好吧，我希望这不是一个简单的疏忽，但我已经为此工作了几个小时！

在我正在处理的页面上，我有一个相当复杂的HTML / CSS结构。我在页面的最底部有文本，它在div中，底边距为10px；。该div在另一个div中，底边距为10px;.That。div位于链的上游，直到<body>。

由于某种原因，文本恰好碰上了它所在的div的底部。我已经创建了一个极简主义的复制品，供人们观看。它确实重现了这个问题，我只是希望我没有删除导致这个问题的任何其他问题。

我确实让它在最新的chrome浏览器中工作，高度为: 100%；在那里的某个地方(我不记得现在在哪里了)，但它没有解决firefox和ie中的问题。这两个浏览器对css都有奇怪的行为，它们最初以正确的底边距大小显示，但立即向下跳回，使文本再次没有底边距。就像是一个小光点。

哦，在我的repro html ie中也没有显示任何居中的东西(至少是ie9)。我希望这不会是个问题。我自己当然可以很容易地解决这个问题。

在chrome中，如果您检查元素，它会以蓝色突出显示文本div，并且蓝色边界框显示div超出了当前显示的位置。

下面是一个极简主义的例子：http://www.del337ed.com/repro.html

我感谢每个人的投入/帮助。

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-09-09 21:15:50

将overflow: hidden添加到#SubmissionDetails，通过阻止collapsing margins在该div上的行为来修复边际问题。

添加一个文档类型作为转义Quirks Mode并在Internet Explorer中修复页面的第一行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(你也可以使用更短的<!DOCTYPE html>，我只是坚持使用你已经有的)

进行此更改也将改进其他浏览器中的内容(即，它将提高一致性)。

票数 6

Stack Overflow用户

发布于 2011-09-09 21:53:21

在您的示例中，包含思想标记的div -当前没有关联的类-添加了以下内容：

height: auto; overflow: hidden;

票数 3

Stack Overflow用户

发布于 2011-09-09 21:04:28

请改用填充。边距是存在的，只是边距没有填充背景(这就是为什么它看起来没有分隔)。它就在那里，只是看不见而已。

element.style {
    padding-bottom: 10px; /* change the margin property to padding */
    font-size: .9em;
    font-style: italic;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7362002

复制

相似问题

问忽略CSS文本下边距
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问忽略CSS文本下边距EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问忽略CSS文本下边距
EN