Два одинаковых элемента span, но имеют разную ширину.

Я создаю два элемента span и добавляю их в DOM с видимостью = скрытый. После добавления обоих элементов span в DOM, я получаю ширину и высоту обоих элементов.Два одинаковых элемента span, но имеют разную ширину.

Удивительно, но ширина и высота разные.

текст, шрифт, шрифт-семья все одинаковы в обоих диапазонах. В чем может быть разница в размере?

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>

Пролет в вопросах являются два диапазона в конце HTML-документа.
Размер 1 = (1217, 67)
Размер второго = (1267, 136)

источник

2013-09-10 vivek.m

Является ли поведение одинаковым во всех браузерах? – SolarBear

Можете ли вы разместить HTML-код? – Vladislav

Причина, скорее всего, в браузере. Пробелы по умолчанию не имеют стиля, и они не являются элементами блока, поэтому он делает их, тем не менее, он хочет. По крайней мере, это моя догадка. – Brett

Спасибо за HTML. Рассмотрите это: размер шрифта, который вы установили для этих пролетов, довольно велик, и когда окно недостаточно широко, текст внутри пролетов начинает обертываться. Пробелы имеют display:inline; по умолчанию, и при обертывании два текста будут отображаться как один, но с другой упаковкой, потому что второй продолжается сразу после первого, и его текст, скорее всего, сломан в другом месте. Если вы установили display:block; для этих пролетов, не должно быть разницы.

источник

2013-09-10 14:45:19 Vladislav

Я новичок в javascript. Мне нужно только измерить ширину текста. Итак, если я использую div вместо span, будет ли какая-либо проблема, поскольку div автоматически блокирует элемент? –

В контексте этой проблемы - не должно быть никаких проблем. – Vladislav

Если они находятся рядом с разным размером элементов (например, находясь рядом с DIV, а не по своей собственной отдельной строке) они будут разных размеров, поскольку они являются встроенными элементами, а не элементами уровня блока.

источник

2013-09-10 12:07:28 BenM

Два одинаковых элемента span, но имеют разную ширину.

ответ

Смежные вопросы