Разница в размере шрифта между вычисленным размером шрифта и определенным размером шрифта CSS?

Question

У меня есть определенный HTML-элемент: текстовой с некоторыми CSS

<textarea id="mytextarea" 
    class="absoluteelement inputtable paddable" 
    style="resize:none;top:70.68187%;left:4.705374%;width:90%;height:11.5%;Background-color:transparent;"> 
</textarea> 

И в CSS:

#mytextarea { 
    font-size: 10.0px; 
    font-color: #FF000000; 
    font-family: arial; 
    text-align: left; 
} 

input,select,textarea { 
    border: none; 
    background: transparent; 
} 

.paddable { 
    padding-left: 5px; 
    padding-right: 5px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /*FF, IE8*/ 
} 

textarea { 
    resize: none; 
    overflow:hidden; 
} 

.absoluteelement { 
    position: absolute; 
} 

Теперь моя проблема заключается в следующем. Когда я попробую

var textarea = document.getElementById("mytextarea"); 
var style = window.getComputedStyle(textarea); 
console.log(style.fontSize); 

Консольные журналы 9.85012722015381px. Тем не менее, когда я проверить текстовое поле с панелью разработчиков в Chrome (вкладка стиля), он показывает

#mytextarea { 
    font-size: 10.0px; 
    font-color: #FF000000; 
    font-family: arial; 
    text-align: left; 
} 

и вычисленной панель, она показывает, как выход консоли:

> font-size: 9.85012722015381px; 

Почему существует несоответствие между двумя значениями? Я четко заявил, что размер шрифта 10.0px, и я не могу найти число 9.85 ... px в любом месте моего css.

UPDATE:

Это только кажется, что происходит в Chrome; Firefox отображает и записывает вычисленного размер шрифта 10.0px

UPDATE 2:

Кажется FONTSIZE изменяется при увеличении или на Chrome.

Answer 1

Насколько я знаю, это действительно проблема, связанная с Chrome.

Прежде всего, если вы зададите размер шрифта в пикселях, вы должны использовать только круглые числа, то есть font-size: 10px;, а не font-size: 10.0px; Номера с плавающей запятой бессмысленны для пикселей и только отбрасывают браузер.

Однако вы не должны волноваться, потому что все номера, которые вы предоставляете, фактически сопоставляются с размером шрифта 10px. Если вам нужно узнать фактический размер шрифта в вашем коде, чтобы что-то с ним сделать, вы можете округлить число:

var myTextArea = document.getElementById("mytextarea"); 
var fontSize = window.getComputedStyle(myTextArea).fontSize.replace("px",""); 
var fontSize = Math.round(fontSize);