Aug 10

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

Eric IDE

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

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

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

written by fxposter \\ tags:


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

  1. 1. npFly Says:

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

  2. 2. FX Poster Says:

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

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

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

  3. 3. npFly Says:

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

  4. 4. npFly Says:

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

  5. 5. FX Poster Says:

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

  6. 6. npFly Says:

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

  7. 7. FX Poster Says:

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

    <!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:

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

  9. 9. FX Poster Says:

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

  10. 10. npFly Says:

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

  11. 11. FX Poster Says:

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

    div {
      font-size: 0.75em;
    }

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

    div div {
      font-size: 1em;
    }
  12. 12. npFly Says:

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

  13. 13. FX Poster Says:

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

Leave a Reply