Форум

Shaci · #1 (**permalink**) 13.03.2010, 21:28

вопрос по HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" «http://www.w3.org/TR/html4/strict.dtd»>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>       
            div {
                width:50px;
                height:50px;
                margin:40px;
                padding:20px;
                background-color:red;                
                }
        </style>
  </head>
  <body>
    <div></div>
    <script>
        alert(document.getElementsByTagName('div')[0].offsetWidth);
        //для FF покажет left-padding + width + right-padding = 90 - независимо от режима
        //для IE6 при стандартном режиме с DOCTYPE покажет 90
        //если удалить DOCTYPE и перейти в режим quirks mode, то в FF ничего не изменится
        //в IE получим 50 - это только width, возможно, это связано с тем, что в IE6 в таком режиме
        //отступ (padding) делается внутрь? marginа это видимо не касается
        
        //я ради интереса поставил padding: 27px, ожидая увидеть как padding-left и padding-right, перекрещиваясь, выйдут из блока с разных сторон и получил 54, как и ожидалось для ширины
        
        alert(document.getElementsByTagName('div')[0].offsetHeight);
        //для FF всегда 90
        //для IE в стандарт режиме 90
        //но без DOCTYPE - 59 ?!!! откуда еще 9 набирается?????

        //alert(document.getElementsByTagName('div')[0].style.width);//пусто потому что не во встроенном стиле, но
        //если установить, то укажет истинное значение width (50px)
        </script>
  </body>
</html>

Octane · #2 (**permalink**) 13.03.2010, 21:41

http://www.quirksmode.org/css/box.html

Shaci · #3 (**permalink**) 13.03.2010, 22:59

Это понятно, просто интересно, почему padding при блочной модели IE,
начиная с некоторого значения, приводят к увеличению ширины и высоты элемента.
Например высота вплоть до padding = 15px не меняется, и остаеется 50,
но при 16 (хотя по идее при высоте в 50px оба padding не пересекаются внутри элемента) уже - 51, при 17 - 53, и.т.д. при 50 - 59,
аналогично с шириной, только при других значениях ()начиная с padding = 26)

"//я ради интереса поставил padding: 27px, ожидая увидеть как padding-left и padding-right, перекрещиваясь, выйдут из блока с разных сторон и получил 54, как и ожидалось для ширины" - это я что-то не то написал, видимо

Tim · #4 (**permalink**) 14.03.2010, 13:48

Цитата:

почему padding при блочной модели IE, начиная с некоторого значения, приводят к увеличению ширины и высоты элемента

Вообще ширина и высота должны расчитываться так width + padding*2 + margin*2. Т.е. действительная ширина и высота становится не равна свойству width при добавлении отступов и (или) полей. Это по стандартам. Однако IE как всегда в переди планеты всей, и действительная ширина элемента в этом "браузере" равна свойству width. С одной стороны это довольно логично, но с другой стандарты нарушены. Самый простой способ добиться кросс-браузерности - не задавать padding и margin для элементов фиксированной ширины. В место этого можно сделать дополнительный сложенный контейнер и задать отступы и поля уже ему, тогда вёрстка будет выглядеть одинаково во всех браузерах.

Цитата:

начиная с некоторого значения

Возможно по тому что, начиная с некоторого значения, содержимое не помещается в контейнере.

Shaci · #5 (**permalink**) 14.03.2010, 14:13

Сообщение от Tim

Вообще ширина и высота должны расчитываться так width + padding*2 + margin*2.

а у меня margin вроде не считает:
offsetWidth выдает width(50) + 2*padding (2 * 20) = 90

Сообщение от Tim

Самый простой способ добиться кросс-браузерности - не задавать padding и margin для элементов фиксированной ширины. В место этого можно сделать дополнительный сложенный контейнер и задать отступы и поля уже ему, тогда вёрстка будет выглядеть одинаково во всех браузерах.

можно примерчик в 5 строк?

Сообщение от Tim

Возможно по тому что, начиная с некоторого значения, содержимое не помещается в контейнере.

похоже на то

Kolyaj · #6 (**permalink**) 14.03.2010, 18:43

Сообщение от Tim

Вообще ширина и высота должны расчитываться так width + padding*2 + margin*2

borderWidthLeft + paddingLeft + width + paddingRight + borderWidthRight. Без margin.

Сообщение от Tim

С одной стороны это довольно логично, но с другой стандарты нарушены.

Когда в IE эту модель реализовывали, никаких стандартов ещё не было. Более того, сейчас уже признали, что модель IE более понятна интуитивно, и в CSS3 имеется возможность указать, какую боксовую модель использовать для блока.

Сообщение от Tim

Самый простой способ добиться кросс-браузерности - не задавать padding и margin для элементов фиксированной ширины.

Самый простой способ -- указать doctype.

Tim · #7 (**permalink**) 14.03.2010, 22:03

Цитата:

borderWidthLeft + paddingLeft + width + paddingRight + borderWidthRight. Без margin.

Ой. Туплю что-то последнее время. Извините.

Цитата:

Самый простой способ -- указать doctype.

Ещё раз извините. Действительно, нестандартная модель в IE используется только при отсутствии DOCTYPE.

Цитата:

можно примерчик в 5 строк?

<div id="my_box">
    <div>контент</div>
</div>

#my_box {
    width: 500px;
}

#my_box div {
    padding: 20px;
}

Свойство padding установленно для вложенного блока. Но как было верно замечено Kolyaj можно просто доктайп указать.

Shaci · #8 (**permalink**) 14.03.2010, 23:04

Сообщение от Tim

В место этого можно сделать дополнительный сложенный контейнер

А я гадать начал, что за сложенный контейнер)

Форум

Справочник

Discord чат

Курсы javascript