Javascript 使用HTML5 doctype时容器中的额外顶部填充_Javascript_Css_Html

Javascript 使用HTML5 doctype时容器中的额外顶部填充

javascript css html

Javascript 使用HTML5 doctype时容器中的额外顶部填充,javascript,css,html,Javascript,Css,Html,以下div中有额外的顶部填充： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Extra Top Padding</title> <style> div { background: tan; } div * {

以下

div

中有额外的顶部填充：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Extra Top Padding</title>
    <style>
        div {
            background: tan;
        }
        div * {
            vertical-align: middle;
        }
        span {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="container">
        <img src="https://ssl.gstatic.com/images/icons/gplus-16.png"><span>Some text</span>
    </div>
    <p id="indicator"></p>
    <script>
        document.getElementById('indicator').textContent = document.getElementById('container').clientHeight;
    </script>
</body>

</html>


额外的顶部填充物
div{
背景：谭；
}
分区*{
垂直对齐：中间对齐；
}
跨度{
字体大小：16px；
}
一些文本

document.getElementById（'indicator'）.textContent=document.getElementById（'container'）.clientHeight；

如果使用HTML 4.01过渡doctype，则会正确显示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

它是HTML5中的一个bug吗？

不，它不是bug，这是所谓的浏览器默认样式表，如果使用重置库，您将摆脱它，请检查此修改的

小提琴：
比较这两张图片：

及

告诉我@jukkaK.Korpela，你的相同代码和相同现象是什么
我将粘贴另一张图片，展示如何在没有任何第三方重置库的情况下解决您的问题。看起来@jukkaK.Korpela的浏览器没有呈现正确的结果，所以请检查这个，并尝试找到另一台计算机来验证它
这不是一个真正的bug，而是一个用户代理/浏览器默认样式。每个浏览器（实际上是浏览器族）都有不同的默认值。我建议使用normalize.css解决此类问题
normalize.css:
tl；博士
这不是虫子。这是对文档使用几乎标准模式或标准模式的结果。这不是填充，而是线条高度空间

就我个人而言，我不会满足于以上的解释。但要充分解释需要大量的细节。下面是：
计算的是泰晤士报的新罗马字体。其他字体可能给出不同的值，尽管原则保持不变
无论是否使用img元素，高度差都是相同的，所以我们放弃它
当您使用HTML5 doctype（或HTML4.01 Strict doctype）时，您将获得标准模式。当您使用HTML4.01过渡doctype时，几乎可以获得标准模式。这两种模式之间的区别主要在于哪些内联框会影响线高度。特别是，在几乎所有标准模式下，都没有效果
因此，在几乎标准模式下，唯一的内联框是文本。div的总高度就是该文本的行高。它是16px*1.25（div的行高度设置）=20px

标准模式更为复杂。现在我们有了文本和支柱。支柱与基线对齐。默认的线高1.25为我们提供了2倍上半前导+13倍上半前导和3倍下降+2倍下半前导。总共20像素
文本为垂直对齐：中间。CSS 2.1规范对此进行了说明
将长方体的垂直中点与父对象的基线对齐
框加上父对象x高度的一半
父框的基线是支柱的基线，我们从上面知道支柱的基线在底部上方5px（添加文本之前）
字体大小为16px时，字体的x高度约为7px。将其减半并截断为整数，得到3px。将其添加到5px中，我们得到底部上方8px文本的对齐线
长方体的垂直中点在对齐线上方有10px，在对齐线下方有10px
线条高度必须足够大，以包含其所有内联框，这意味着它必须是路线上方的最大框数+路线下方的最大框数。这是线上方的最大值（12px[struct]，10px[text]），线下方的最大值（8px[struct]，10px[text]）
这等于（12px+10px）或22px
 看起来真的很奇怪。同时，作为一种解决方法，您可以隐式指定DIV的高度：谢谢您的回答，但这不是一个好的解决方案，因为DIV
高度应始终等于其内容高度。此外，在演示中，内容不在容器的中间对齐，确实是一个奇怪的现象。它也会在没有图像的情况下出现。它不是填充（浏览器开发工具显示零填充，正如预期的那样）；当指定了
时，行框的计算会有所不同。是的，你是对的。通过填充
我指的是容器内的一些额外空间。那么您希望在#指示器
中看到什么？JSFIDLE包含与问题相同的代码和现象。如果你说问题出在默认样式表上，你应该说它是哪一个特定的项目。@JukkaK.Korpela在屏幕截图中，你可以看到区别是检查标准化的CSS按钮。你发布的JSFIDLE地址显示没有区别。现在您是说JSFIDLE中的设置有影响。嗯，他们没有，比如在我的Firefox上。即使他们这样做了，这也不能真正回答这个问题。@JukkaK.Korpela该设置仅在该文档上应用规范化css。如果你看不出区别，也许你应该检查一下你的firefox。浏览器默认样式表是所有主要浏览器的常用设置，对此进行争论是荒谬的。我看到的是22，在问题元素顶部有额外的空间，如原始。我们生活在平行的宇宙中吗？顺便说一句，CSS代码是无效的（结尾是虚假的“}”），我想知道在body
或p
上设置边距或填充会如何影响问题，这是关于div
元素内部的内容。@JukkaK.Korpela请仔细阅读我的帖子，然后无任何理由盲目地否决投票。每个用户代理都有另一个默认样式（每个渲染引擎）。这就是答案。解决方案：规范化或重置css。如果我能多次投票。。。我会的。回答得很好。非常感谢你的回答！为了得到同样的结果，他