Aurora: Browser Concept by Mozilla Labs (часть 4) Зачётный рингтон
Aug 10

Вложенные элементы и проценты/em-ы в CSS

Web, Программирование Add comments

Вчера наткнулся на сайте Eric IDE (прикольная, довольно легковесная IDE для питона и руби) на достаточно интересную картину, а именно:

Eric IDE

Более подробный пример.

Думаю, проблема всем понятна - при указании размера шрифта в процентах (да и в em-ах тоже, кстати говоря) для тех элементов, которые могут быть вложенными приводит к плохим последствиям! Будьте осторожны!

Лично я везде указываю размеры шрифтов в пикселях и на мой взгляд - это вполне оправданно - на моей памяти было мало случаев, в которых размеры шрифтов действительно рассчитывались друг относительно друга (разве что относительно body, но тут уж ничего не поделаешь).

written by FX Poster \\ tags:


13 Responses to “Вложенные элементы и проценты/em-ы в CSS”

  1. 1. npFly Says:
    August 11th, 2008 at 18:55

    Проблема здесь не в процентах или em а скорее в неправельно написанном css ;)

  2. 2. FX Poster Says:
    August 11th, 2008 at 19:00

    Неа. Посмотри мой пример. И подумай над тем, что ты, например, указываешь:

    #sidebar div {
    font-size: 0.9em;
  }

    Этот код ведет к подобным глюкам. Такое встречается нечасто (на моей памяти - это впервые), но всё-таки встречается. :)

  3. 3. npFly Says:
    August 11th, 2008 at 19:59

    Правельно! Ведь размеры в процентах и em единицах наследуютса от родителя. Или я чегото не понял?!

  4. 4. npFly Says:
    August 11th, 2008 at 20:03

    Кстати я вот недавно встретил баг в Firefox 3 связанный с ошибкой при делении. Появляться он когда в тэге используется размер шрифта в процентах или em.

  5. 5. FX Poster Says:
    August 11th, 2008 at 20:06

    Понял ты правильно, только такой CSS, мягко говоря, нелогичен, не правда ли? :)

  6. 6. npFly Says:
    August 11th, 2008 at 20:25

    Как раз наоборот. По умолчанию свойство font-size: во многих браузерах имеет значение inherit и работает оно помойму только с относительными величинами. Это избавляет css от лишнего кода, а именно fon-size в почти каждом правиле. Это конечно может сконфузить особенно если ты создаёшь полностью эластичный макет, тоесть все размеры и отступы в em.

  7. 7. FX Poster Says:
    August 11th, 2008 at 20:59

    Не думаю, что с относительными. ;)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>IE</title>

<style type="text/css" media="screen">

body {
  font-size: 20px;
}

#content {
  font-size: 0.8em;
}

#content p {
  font-size: inherit;
}
</style>

</head>

<body>

<div id="content">
  Привет
  <p>Привет</p>
</div>

</body>

</html>

    Если бы inherit работал с относительными величинами “Привет” в #content p был бы меньше, чем “Привет” в #content.

  8. 8. npFly Says:
    September 8th, 2008 at 09:38

    Ты путаешь относительные величины с абсолютными, это потенциальная разница ;)

  9. 9. FX Poster Says:
    September 8th, 2008 at 13:18

    Ну и где я путаю? :)

  10. 10. npFly Says:
    September 8th, 2008 at 16:10

    Вобщем я переделал твой пример на правильный. Я надеюсь разница теперь видна ;)

  11. 11. FX Poster Says:
    September 8th, 2008 at 21:06

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

    div {
  font-size: 0.75em;
}

    то я должен указывать ОБЯЗАТЕЛЬНО еще и:

    div div {
  font-size: 1em;
}
  12. 12. npFly Says:
    September 8th, 2008 at 22:30

    При чем здесь пофиксить? Это же не баг, правило исполняетса верно. Просто если использовать абсолютную величину, к примеру 12px то размер фонта будет во всех вложенных елементах 12px, а если использовать относительную величину как в твоём примере то в каждом следующем елементе размер фонта будет на 1/4 меньше родительского.

  13. 13. FX Poster Says:
    September 8th, 2008 at 22:32

    Это для математики не баг. А для юзабилити - вполне себе баг.

Leave a Reply