Использование em на шрифте VS width

У меня проблемы с пониманием того, как они должны работать в CSS. Я пытаюсь заставить элемент (в данном случае div) масштабировать так же, как и шрифт. Я сузил свое постановление задачи настолько малым, насколько смогу.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style>
      body { font-size: 100%; }
      .EventReg {
        border:solid #000000 .063em;
        background-color:#000000;
        padding:.625em;
        width:13.65em;
      }
    </style>
  </head>
  <body>
    <div style="font-size:2em;">Event Registration</div>
    <div class="EventReg"></div>
  </body>
</html>

Кажется, это правильно масштабируется в IE, FF и Chrome, когда я меняю body {font-size: 100%; } в любой другой процент.

Я ожидаю, что в браузере компьютера я вижу, что div и текст имеют одинаковую длину. Однако, когда я проверяю это с помощью своего смартфона на Android, текст становится немного шире, чем div.

Я ожидал бы, что div под текстом будет той же ширины, что и текст, даже если он масштабирован.

Есть идеи, что я делаю неправильно или где мое предположение неверно?

Источник

3 ответа

Решение

Я решил эту проблему, сделав текст изображением. Это не было идеальным решением для меня, но оно заставляет текст быть одинаковым на всех устройствах и браузерах.

Источник

Это может быть как-то связано с -webkit-text-size-adjust имущество. Попробуйте добавить следующий стиль к вашему CSS.

* {
  -webkit-text-size-adjust:100%;
}

На некоторых мобильных телефонах браузер регулирует размер шрифта, чтобы сделать веб-сайты более читабельными. Установка этого свойства на 100% (или возможно none) должен предотвратить это.

Источник

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

Чтобы ширина элемента зависела от ширины некоторого текста в другом элементе, вам нужны такие вещи, как форматирование таблицы или другие инструменты макета. В этом случае, если вам нужен сплошной прямоугольник под текстом, вы можете установить, например, display: inline-block и подходящий border-bottom на элемент, содержащий текст.

Источник
Другие вопросы по тегам