两个相同的跨度元素,但宽度不同
Two same span elements but have different width
我创建了两个 span 元素并将它们添加到 DOM 中,可见性 = 隐藏。将两个跨度元素添加到 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 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>
有问题的跨度是 html 文档末尾的两个跨度。
1st 的大小 = (1217, 67)
秒的大小 = (1267, 136)
感谢您的 HTML。考虑一下:您为这些范围设置的字体大小非常大,当窗口不够宽时,范围内的文本开始换行。默认情况下,跨度display:inline;
,当换行时,两个文本将显示为一个 BUT,但换行方式不同,因为第二个文本紧随第一个文本之后继续,并且其文本很可能在不同的地方被破坏。如果为这些跨度设置display:block;
,则应该没有区别。
如果它们位于不同大小的元素旁边(例如在div 旁边而不是在它们自己的单独行上),它们的大小将不同,因为它们是内联元素而不是块级元素。
相关文章:
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- 如何在jQuery中包装两个元素的组
- JavaScript:当有两个B类元素时,如何在id X中的B类中选择A类
- 无法使以下ng on click outside指令在同一页面上的两个元素上工作
- Jquery:当两个或多个条件为true时,选择一个元素
- 如何按id查找两个类中任一类的子元素
- react-让一个元素返回两个相邻的<tr>标签
- 检查来自不同数组的两个元素的一个属性是否相等
- javascript函数包含两个元素和web音频api
- 如何比较两个字符串并删除jquery中的元素
- 将JQuery单击事件直接指向同一元素的两个
- 如何使用jQuery绕过具有指定类和两个条件的元素的函数
- 使用Javascript匹配两个HTML元素的高度
- 如何在两个动画画布元素之间进行通信
- 如何将日期和时间拆分为两个元素
- 检查最后两个元素
- 如何选择嵌套了两个 .each() 函数的多个元素
- 在两个元素的 onrender 事件之后执行函数
- 检查两个或多个 DOM 元素是否重叠
- 如何在同一个表中显示这两个嵌套ng重复的元素