两个相同的跨度元素但具有不同的宽度答案

【问题标题】：Two same span elements but have different width两个相同的跨度元素但具有不同的宽度
【发布时间】：2013-09-10 12:04:40
【问题描述】：

我创建了两个 span 元素并将它们添加到具有可见性 = 隐藏的 DOM。将两个 span 元素添加到 DOM 后，我得到了两个元素的宽度和高度。

令人惊讶的是，宽度和高度都不同。

文本、字体大小、字体系列在两个跨度中都相同。大小不同的原因可能是什么？

var sp1 = goog.dom.createDom('span', null);
sp1.innerText = text; 
sp1.style.fontSize = "60px";
sp1.style.fontFamily = family;
sp1.style.visibility = "hidden";
goog.dom.appendChild(document.body, sp1);

var sp2 = goog.dom.createDom('span', null);
sp2.innerText = text; 
sp2.style.fontSize = "60px";
sp2.style.fontFamily = family;
sp2.style.visibility = "hidden";
goog.dom.appendChild(document.body, sp2);

var sz1 = goog.style.getSize(sp1);
var sz2 = goog.style.getSize(sp2);

assert(sz1 == sz2)

页面的 HTML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link type="text/css" rel="stylesheet" href="ff.css">
        <style>
            #id3{
            /*font-family: abracadabra, Orator W01 Slanted, Alpha Jazz W00 Regular;*/
            font-family: abracadabra, Orator W01 Slanted;
            }
            #id4{
            font-family: Alpha Jazz W00 Regular, Orator W01 Slanted, Times New Roman, sans-serif;
            }
        </style>
        <title>Web Fonts</title>
    </head>
    <body>
        <div id="id1">1. Quick Brown Fox Jumps over the Lazy Dog</div>
        <div id="id2">2. Quick Brown Fox Jumps over the Lazy Dog</div>
        <div id="id3">3. Quick Brown Fox Jumps over the Lazy Dog</div>
        <div id="id4">4. Quick Brown Fox Jumps over the Lazy Dog</div>
        <div id="test1" style="position: absolute; top: 0px; z-index: 2; width: auto; right: 0px; background-color: rgb(255, 0, 0); display: none;">
            <div style="border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: rgb(8, 12, 18); padding: 10px 5px;">
                <div style="float: left; background-image: url(logo.png); padding-left: 25px; color: rgb(0, 0, 0); font-size: 18px; background-position: 0% 50%; background-repeat: no-repeat no-repeat;">test</div>
                <div style="float: right;"><img src="logo.png" style="margin: 0px;"></div>
                <div class="clear"></div>
            </div>
            <div id="test2"></div>
            <div id="test3"></div>
            </div>
        </div>

        <span style="font-size: 60px; font-family: Helvetica; visibility: hidden;">3. Quick Brown Fox Jumps over the Lazy Dog</span>
        <span style="font-size: 60px; font-family: Helvetica; visibility: hidden;">3. Quick Brown Fox Jumps over the Lazy Dog</span>
    </body>
</html>

问题中的 span 是 html 文档末尾的两个 span。
第一个的大小 = (1217, 67)
第二个大小 = (1267, 136)

【问题讨论】：

所有浏览器的行为都一样吗？
你能发布 HTML 吗？
原因很可能是浏览器。 Spans 默认没有样式，它们不是块元素，因此它可以根据需要呈现它们。至少这是我的猜测。

标签： javascript html

【解决方案1】：

感谢 HTML。考虑一下：您为这些跨度设置的字体大小非常大，当窗口不够宽时，跨度内的文本开始换行。 Spans 默认有display:inline;，当包装时，两个文本将显示为一个但具有不同的包装，因为第二个在第一个之后立即继续，并且它的文本很可能在不同的地方被破坏。如果您为这些跨度设置display:block;，则应该没有区别。

【讨论】：

我是一个 JavaScript 新手。我只需要测量文本会占用的宽度。那么，如果我使用div而不是span，那么div会自动成为块元素吗？
在这个问题的背景下 - 应该没有任何问题。

【解决方案2】：

如果它们靠近不同大小的元素（例如靠近 div 而不是在它们自己的单独行上），它们的大小将不同，因为它们是内联元素而不是块级元素。

【讨论】：