Ширина текста разная в разных браузерах
По какой-то причине мне нужно получить ширину текста. Когда я использую offsetWidth, clientWidth или getBoundingClientRect, у меня есть различия в вычислении ширины текста в разных браузерах, в основном в Edge.
Я пробовал следующее: демонстрация
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
h1 {
display: inline-block;
font-size: 38px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}<h1>Welk woord is onderstreept?</h1>
<script>
var h1 = document.getElementsByTagName("h1")[0];
document.write(h1.offsetWidth);
</script>Неважно, какой шрифт я использую. Кто-нибудь знает правильное решение, чтобы иметь одинаковую ширину текста в каждом браузере?
Проще говоря, вы не можете, поскольку каждый браузер имеет свой способ визуализации текста, и, кроме того, разные ОС, ... и никто не будет тестировать кросс-браузер, чтобы увидеть, сколько пикселей отличается тот или иной, и дать вам какой-то штраф за это :). И их различие - одна из причин, по которой люди выбрали одну из них.
Хм, очень плохо, тогда я сильно застрял, потому что текст теперь будет ломаться, когда ширина контейнера равна ширине текста. Спасибо, в любом случае!
Разные ОС и разные браузеры используют разные механизмы рендеринга шрифтов, поэтому они могут иметь разный размер.