Блог

У меня есть следующий код :

CSS

 #container{
    font-size: 0.625em;
}

#div1 {
    width: 200px;
    height: 200px;
    background-color: green;
}

#div2 {
    width: 20em;
    height: 20em;
    background-color: red;
}
  

HTML

 <div id="container">
    <div id="div1">
    This is a test message.This is a test message.This is a test message.This is a test message.
    </div>
    <div id="div2">
        This is a test message.This is a test message.This is a test message.This is a test message.
    </div>
</div>
  

Версия Chrome

 Version 35.0.1916.153 m
  

Когда вы увеличиваете масштаб до 50% или меньше в Chrome, размер двух разделов будет отличаться.
Если вы проверите размер шрифта в инструменте разработки, вы поймете, что
Chrome автоматически увеличил размер шрифта документа.

Кто-нибудь может сказать мне, почему это происходит? И как я мог это предотвратить?

Я провожу некоторое исследование разницы между em и px, поэтому изменение ширины #div2 на 200 пикселей неприемлемо.

Ссылка на JsFiddle

Обновлено содержимое и исходный код.

Спасибо за вашу помощь.

Обновлено 16 июня 2014 г.

Нашел кое-что интересное и хочу поделиться с вами, ребята, здесь.

Если вы когда-либо касались «Дополнительных настроек шрифта» в Chrome или использовали версию по умолчанию (не китайскую или японскую):

1. вам никогда не будет разрешено устанавливать размер шрифта на некоторое число меньше 6 пикселей (в китайской или японской версии это будет 12 пикселей).

2. 1em никогда не будет меньше 6 пикселей (12 пикселей), когда вы измеряете что-то вроде «height» с помощью «em».

3. если вы установите для текста значение 6 пикселей и увеличите масштаб до 50%, вы можете ожидать, что текст будет отображаться как 3 пикселя (уменьшится вдвое). Но текст будет установлен chrome на 12 пикселей и может нарушить ваш макет.

Спасибо Давару Хусейну. Он помогает мне понять минимальный размер шрифта.

Смотрите, вы использовали px для первого div и em для второго.

Chrome имеет минимальный размер шрифта, и шрифты, меньшие, чем он, будут отображаться только как размер шрифта. (смотрите Настройки Chrome)

Теперь, используя div с px, поле продолжает увеличиваться и становится еще меньше при увеличении на 33% (или 25%, или 50%), но при использовании em размер поля остается прежним при достижении минимального размера шрифта. см

em полезен в браузерах, которые реализуют масштабирование путем масштабирования размера шрифта, например Chrome. Поэтому, если вы измените размер всех своих элементов, используя em, они соответственно масштабируются. em гарантирует, что все содержимое отображается как есть, даже если размер div изменяется (при масштабировании). Надеюсь, вы получили свой ответ 🙂

Редактировать

В IE10 в настройках нет минимального размера шрифта, как в GC35. Таким образом, em px отображаются как друг друга.

Divs имеет разную ширину.

10em не всегда эквивалентно 100px

попробуйте установить ту же ширину (em или px)

em равен текущему размеру шрифта, например, если размер шрифта документа равен 12pt, 1em равен 12pt

Один пиксель равен одной точке на экране компьютера

обратитесь к этой странице для получения документации

ваша обновленная скрипка здесь

 body {
            font-size: 0.625em;
        }

        #div1 {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        #div2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
  

Обновить

если это не сработает, попробуйте использовать это свойство css

 -webkit-text-size-adjust: none;