Jump to content
  • 0

Непонятка с относительным размером шрифтов


kitrish
 Share

Question

Здравствуйте.

Начну с исходных данных:

DOCTYPE страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Нужные части CSS:


body{
font: 62.5%/1.6em Arial, sans-serif;
}

СУТЬ ПРОБЛЕМЫ:

Весь текст на странице изначально (при дефолтном размере шрифта в настройках браузера 16px) отображается как задумано и размер шрифта сопоставим с 12px.

Но, если на данной странице часть данных подгрузить с помощью AJAX, размер шрифта в загруженных данных будет визуально отличаться (он будет меньше) от размера шрифта в "родных" элементах страницы.

А если некий JS код из подрруженных с помощью AJAX данных ещё раз подгрузит какие-то данные и поместит их внутри блока с ранее подгруженными, то размер шрифта в нём будет ещё меньше, чем у элементов, подгруженных при первом заходе.

Почему так происходит и как это профиксить?

P.S. Тестил на последней версии Chrome и Opera, и там и там результат один и тот же.

Edited by kitrish
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

вооще то 62.5% от 16px это 10px, а не 12.

Если шрифт задается в относительных единицах то базовое значение берется у родителя.

Если сделать так http://jsfiddle.net/Fs5ra/ думаю станет понятен смысл как работают относительные единицы(смотрите на размер шрифта ссылок, а класс то один и тот же). Смотрите куда вы вставляете контент и какой размер шрифта задан родителю вашего подгружаемого контента, ибо если подгружаемому контенту размер задан в относительных единицах то за базу берется значение родителя, а оно может быть отличное от размера для всей страницы. если у родителя размер тоже в относительных единицах, значит смотрим значение родителя родителя и т.д.).

Edited by wwt
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy