Проблемы с использованием em-единиц в Chrome

У меня проблема при использовании em-модулей в Chrome (версия 31.0.1650.63 m).Проблемы с использованием em-единиц в Chrome

После JSFiddle производит неправильный выход в Chrome (по сравнению с Firefox или IE зеленый ящик слишком велик):

http://jsfiddle.net/rapik/j72aZ/

HTML:

<div class="aaa"> 

    <div class="bbb"> 

    </div> 

</div>

CSS:

.aaa { 
    font-size: 0.5rem; 

    width: 30em; 
    height: 30em; 

    background: red; 
} 

.bbb { 
    font-size: 0.1em; 

    width: 15em; 
    height: 15em; 

    background: green; 
}

Проблема заключается в правиле font-size: 0.1em, что не делает их в 10 раз меньше. Вместо этого он устанавливает их на некоторое минимальное значение. Не будет никакой разницы между font-size: 0.1em и font-size: 0.2em, потому что оба они меньше этого магического минимального значения ....

Является ли это ошибкой или я что-то не так?

Этот конкретный случай можно решить, умножив все значения класса «bbb» на 10. Но в моем случае вещь сложнее, и мне нужно это font-size: 0.1em.

Я использую em units для создания масштабируемых элементов управления. Мои элементы управления имеют root div и несколько дочерних элементов. Идея состоит в том, что все значения задаются с использованием em, а размер времени выполнения em управляется размером шрифта корневого элемента. Если элемент имеет размер шрифта, то он будет зависеть от него.

Буду признателен за любые идеи или предложения!

Update:

Здесь представлены скриншоты различных выходов я говорю о:

enter image description here

источник

2014-01-14 Andrej

Невозможно воспроизвести. Firefox (26), Chrome (31.0.1650.63 м) и Opera (Presto) отображают зеленый квадрат как 1/4 размера красного квадрата. Только IE9 делает зеленую коробку исключительно маленькой. – cimmanon

@cimmanon: Какая ОС? Я вижу зеленый квадрат 12x12 в FF 26, Windows 7. – 412

Я также использую Windows 7. – cimmanon

Поскольку размер шрифта по умолчанию является то, что em размер относится к вам нужно объявить размер для шрифта, чтобы em был универсальным.

http://jsfiddle.net/j72aZ/1/

Эта скрипка объявляет размер шрифта во всем мире как 12px, а затем браузер обрабатывает размер эм универсально, что 12px, в отличие от необъявленной размера, который по умолчанию браузера пользователей.

Этот сайт имеет хороший материал, который может быть в состоянии помочь вам в дальнейшем:

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

источник

2014-01-14 18:46:22 Phlume

Ваше описание звучит так, будто вы говорите о нем не em. em зависит от размера шрифта родительского элемента. Тем не менее, ваш пример устраняет проблему в моем примере. На самом деле достаточно установить размер шрифта класса aaa в пикселях вместо установки его с помощью rem: http://jsfiddle.net/rapik/j72aZ/5/ Я сделаю больше тестов позже :-) – Andrej

@Andrej если это решение решает вашу проблему, вы должны отметить ее как принятую. –

Это вызвано тем, что минимальный размер шрифта установка округляется в 6px (в Chrome 30+) - вы не можете выбрать меньшее значение. Это не является проблемой при установке размера шрифта .aaa, так как его вычисленное значение равно 8px. Но используя font-size: 0.1em; на .bbb, вычисленное значение 0.8px - и так как это меньше, чем сурик, фактическое используемое значение является 6px:

http://linenwoods.com/images/dev.png

This сообщения об ошибке, хотя немного не связаны, предложило изменить минимальную настройку размера шрифта для чего-то большего, прессинга сделано, а затем сменил его на 6 пикселей (хотя, похоже, он не работал для вашего примера.) Он также упомянул, что до Chrome 27 вы были once, способный обойти это с помощью -webkit-text-size-adjust: none; (хотя он устарел с версии 27.) This, несколько недавний вопрос, ищет аналогичное решение, но ему еще не ответили.

источник

2014-01-14 19:08:00 412

Это что-то! Но после ответа Phlume я попытался установить размер шрифта '.aaa', используя пиксели (« 12px »вместо« 0.1rem »), и это помогло. Вычисленный размер '.bbb' теперь' 1px' ... Проверьте эту скрипту: http://jsfiddle.net/rapik/j72aZ/5/ – Andrej

@Andrej: Вычисленный стиль '.bbb' по-прежнему показывает 6px для меня (в этой скрипке). – 412

Интересно. Я снова проверил, и я вижу «1px» для '.bbb' (Chrome 31.0.1650.63 m на Win Server 2012). Вы получаете небольшую зеленую коробку (например, 15x15 px) или большую? – Andrej

В 412 пояснил, что это связанно с Chrome минимального размера шрифта 6px, хотя я добавлю, что этот размер шрифта пинает только в том, когда размерах шрифта задается с помощью em или rem. Либо вы можете принять это ограничение, либо вы можете обойти его.

Допустим, вы ориентируетесь на размер корневого шрифта 1px при 1 эм = 16px (т.е. большинство браузеров), вы можете подумать, чтобы использовать такие правила:

html { font-size: 0.0625em } 
.myElem { height: 20em; font-size: 12em; }

, как я уже сделал (логика в том, что ваш высота контейнера должна масштабироваться в зависимости от размера шрифта). В Chrome кажется, что здесь font-size будет равно 12 * 1px = 12px, как и ожидалось, однако высота будет вычисляться как 20 * 6px = 300px, используя минимальный размер шрифта 6px, что, конечно, нежелательно.

Вместо этого, вы можете использовать следующий подход:

html { font-size: calc(1em/16); } 
.myElem { height: 20em; font-size: 12em; }

Корневой элемент (<html>) размер шрифта по-прежнему рассчитывает на 1px когда 1 em = 16px, однако, как это в рх вместо em/rem, минимальный размер шрифта Правило 6px не вступает в игру, а высота будет равна 20px по желанию.

источник

2017-08-07 04:11:15 andrewb

с помощью calc хорошо! благодаря – Safareli

Проблемы с использованием em-единиц в Chrome

ответ

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