никак не могу понять
вопрос по 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>
|
|
Это понятно, просто интересно, почему padding при блочной модели IE,
начиная с некоторого значения, приводят к увеличению ширины и высоты элемента. Например высота вплоть до padding = 15px не меняется, и остаеется 50, но при 16 (хотя по идее при высоте в 50px оба padding не пересекаются внутри элемента) уже - 51, при 17 - 53, и.т.д. при 50 - 59, аналогично с шириной, только при других значениях ()начиная с padding = 26) "//я ради интереса поставил padding: 27px, ожидая увидеть как padding-left и padding-right, перекрещиваясь, выйдут из блока с разных сторон и получил 54, как и ожидалось для ширины" - это я что-то не то написал, видимо |
Цитата:
Цитата:
|
Цитата:
offsetWidth выдает width(50) + 2*padding (2 * 20) = 90 Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
<div id="my_box">
<div>контент</div>
</div>
#my_box {
width: 500px;
}
#my_box div {
padding: 20px;
}
Свойство padding установленно для вложенного блока. Но как было верно замечено Kolyaj можно просто доктайп указать. |
Цитата:
|
| Часовой пояс GMT +3, время: 13:22. |