Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.03.2010, 21:28
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

никак не могу понять
вопрос по 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>
Ответить с цитированием
  #2 (permalink)  
Старый 13.03.2010, 21:41
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

http://www.quirksmode.org/css/box.html
Ответить с цитированием
  #3 (permalink)  
Старый 13.03.2010, 22:59
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

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

"//я ради интереса поставил padding: 27px, ожидая увидеть как padding-left и padding-right, перекрещиваясь, выйдут из блока с разных сторон и получил 54, как и ожидалось для ширины" - это я что-то не то написал, видимо
Ответить с цитированием
  #4 (permalink)  
Старый 14.03.2010, 13:48
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 05.06.2009
Сообщений: 1,703

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

Цитата:
начиная с некоторого значения
Возможно по тому что, начиная с некоторого значения, содержимое не помещается в контейнере.
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
Ответить с цитированием
  #5 (permalink)  
Старый 14.03.2010, 14:13
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Сообщение от Tim Посмотреть сообщение
Вообще ширина и высота должны расчитываться так width + padding*2 + margin*2.
а у меня margin вроде не считает:
offsetWidth выдает width(50) + 2*padding (2 * 20) = 90


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

Сообщение от Tim Посмотреть сообщение
Возможно по тому что, начиная с некоторого значения, содержимое не помещается в контейнере.
похоже на то
Ответить с цитированием
  #6 (permalink)  
Старый 14.03.2010, 18:43
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Tim
Вообще ширина и высота должны расчитываться так width + padding*2 + margin*2
borderWidthLeft + paddingLeft + width + paddingRight + borderWidthRight. Без margin.

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

Сообщение от Tim
Самый простой способ добиться кросс-браузерности - не задавать padding и margin для элементов фиксированной ширины.
Самый простой способ -- указать doctype.
Ответить с цитированием
  #7 (permalink)  
Старый 14.03.2010, 22:03
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 05.06.2009
Сообщений: 1,703

Цитата:
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 можно просто доктайп указать.
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
Ответить с цитированием
  #8 (permalink)  
Старый 14.03.2010, 23:04
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Сообщение от Tim Посмотреть сообщение
В место этого можно сделать дополнительный сложенный контейнер
А я гадать начал, что за сложенный контейнер)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не могу понять какая кодировка Andrey Sipin Events/DOM/Window 1 05.10.2009 18:25
Никак не могу справиться с jQuery.each() khusamov jQuery 4 25.06.2009 20:00
Предполагается наличие объекта... не могу понять где косяк mp3moto Internet Explorer 3 18.06.2009 04:34
не могу понять в чём ошибка scuter Общие вопросы Javascript 2 28.08.2008 15:22
Не могу понять как работает jQuery kostiaGt jQuery 2 20.07.2008 08:42