Это довольно мутный пример того, как разные броузеры наследуют вложенность с разными типами position.
Идея заключается в том, чтобы управлять положением и размерами одного слоя по отношению к положению и размеру другого слоя.
В этом примере родительский контейнер пуст, а дочерний содержит текст. Соответственно, мы ожидаем увидеть этот текст внутри дочернего контейнера.
|
cover
cover cover cover |
FireFox строго наследует высоту и ширину текст выпадает из контейнера. Но, к несчастью, он не наследует и не накладывает на дочерний контейнер padding и margin, поэтому дочерний контейнер вылез за пределы родительского.
Ни overflow: visible, ни box-sizing: border-box; -moz-box-sizing: border-box не помогут вместить текст в контейнер.
Отбиться от правого края с помощью border также не получится, хотя мы можем упралять шириной вложенного блока с помощью правой границы.
|
cover
cover cover cover |
Можно заметить, что хотя родительский border, в отличие от padding, оказывает влияет на ширину дочернего контейнера и в Internet Explorer, и в FireFox, этот способ не совместим с Internet Explorer, в котором padding также оказывает влияние на эту ширину.
Относительное позиционирование возвращает все на свои места, однако при этом мы теряем высоту родительского контейнера в Internet Explorer. К тому же не смотря на то, что наследование padding в FireFox включилось, полностью исчезло наследование высоты. Логика такого поведения мало вразумительна. В любом случае ни один из примеров не похож на то, что мы видим в Internet Explorer.
|
cover
cover cover cover |
Попробуем исключить padding и увеличить border, чтобы поместить дочерний контейнер по середине родительского в FireFox. При этом нам понадобится третий охватывающий контейнер для замены функции укорачивающегоя родительского контейнера.
|
(used
instead of height)
cover
cover cover cover |
Высота охватывающего контейнера растягивает вложенный контейнер при относительном позиционировании в Internet Explorer. В FireFox она только смещает его вниз.
Для того, чтобы заменить смещаемый контейнер без изменения положения вложенных контейнеров, попробуем снова назначить абсолютное позиционирование всем вложенным контейнерам.
|
(used
instead of height)
cover
cover cover cover |
Результат впечтляет! FireFox стал вести себя как Internet Explorer при относительном позиционировании, а то что отобразил Internet Explorer 5, вообще с трудом поддается разумению. Можно подумать, что при абсолютном позиционировании, блоки способны вести себя как текст. Тем не менее, попробуем разобраться и настроить этот пример.
При фиксированной высоте в обоих броузерах пример выглядит абсолютно одинаково!
|
cover
cover cover cover |
Можно завести дочерний контенер вовнутрь и поставить его на нижнюю границу.
|
cover
cover cover cover |
Вот рецепт позиционирования при фиксированной ширине и высоте:
<div style="position: relative; height: 100%; width: 100%; background-color: red"> <div style="position: absolute; height: 100%; width: 100%; padding-left: 9px; padding-right: 9px; padding-top: 9px; padding-bottom: 0px"> <div style="position: relative; top: 0px; left: 0px; height: 100%; width: 100%; background-color: #AAAAAA"> (content here) </div> </div> </div>
Однако у этой конструкции есть один важный недостаток - она не может растянуть по вертикали четвертый охватывающий слой, поэтому попробуем сделать часть, содержащую текст в отдельном слое, способном управлять высотой двух вложенных. Разместим в охватывающем слое четыре пары с разных сторон основного слоя.
|
cover cover cover |
Вот как выгдядит этот пример (пример диалога со скругленными уголками) при использовании локальных стилей:
dialog title
offset_neight = middle_height + top_height
cover cover cover |
В этом примере используется одно круглое изображение для уголков и две линии - вертикальная и горизонтальная - вырезанные из этого же изображения
<div style="position: relative; height: 100%; width: 100%">
<!-- top -->
<div style="position: absolute; height: 100%; width: 100%; left: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px">
<!-- top left -->
<div style="background-image: url('Images/Corner.gif'); font-size: 0px; position: absolute; top: 0px; right: 0px; left: 0px; height: 9px; width: 9px; background-position: left top">
</div>
<!-- top right-->
<div style="background-image: url('Images/Corner.gif'); font-size: 0px; position: absolute; top: 0px; right: 0px; height: 9px; width: 9px; background-position: right top">
</div>
<!-- -->
</div>
<!-- top-center -->
<div style="position: absolute; height: 100%; width: 100%; left: 0px; padding-left: 9px; padding-right: 9px; padding-top: 0px; padding-bottom: 0px">
<div style="background-image: url('Images/CornerHorz.gif'); font-size: 0px; position: relative; right: 0px; left: 0px; height: 9px; width: 100%; background-position: left top">
</div>
</div>
<!-- middle -->
<div style="position: absolute; height: 100%; width: 100%; left: 0px; padding-left: 9px; padding-right: 9px; padding-top: 9px; padding-bottom: 9px">
<!-- left -->
<div style="position: absolute; left: 0px; height: 100%; width: 9px; padding-bottom: 9px">
<div style="background-image: url('Images/CornerVert.gif'); position: relative; left: 0px; height: 100%; width: 100%; background-position: left top">
</div>
</div>
<!-- right -->
<div style="position: absolute; right: 0px; height: 100%; width: 9px; padding-bottom: 9px">
<div style="background-image: url('Images/CornerVert.gif'); position: relative; left: 0px; height: 100%; width: 100%; background-position: right top">
</div>
</div>
<!-- -->
</div>
<!-- middle-center -->
<div style="position: absolute; height: 30px; width: 100%; left: 0px; padding-left: 9px; padding-right: 9px; padding-top: 9px; padding-bottom: 0px">
<!-- center -->
<div style="position: relative; left: 0px; height: 30px; width: 100%; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px">
<div style="background-color: #FF9966; position: absolute; left: 0px; height: 100%; width: 100%">
<!-- corner image -->
<div style="background-color: #FFFF00; position: absolute; left: 0px; height: 30px; width: 30px">
</div>
<!-- dialog title content -->
<h5 align="center">dialog title</h5>
<!-- end dialog title content -->
</div>
</div>
<!-- -->
</div>
<!-- common -->
<div style="position: relative; height: 100%; width: 100%; padding-left: 9px; padding-right: 9px; padding-top: 0px; padding-bottom: 0px">
<!-- top offset-->
<div style="position: relative; height: 39px; width: 100%">
</div>
<div style="background-color: #99FFFF">
<!-- dialog content-->
(content here)
<!-- end dialog content-->
</div>
</div>
<!-- bottom -->
<div style="position: absolute; height: 100%; width: 100%; left: 0px; padding-left: 0px; padding-right: 0px; padding-top: 9px; padding-bottom: 0px">
<!-- left-bottom -->
<div style="background-image: url('Images/Corner.gif'); font-size: 0px; position: absolute; top: 0px; left: 0px; height: 9px; width: 9px; background-position: left bottom">
</div>
<!-- right-bottom -->
<div style="background-image: url('Images/Corner.gif'); font-size: 0px; position: absolute; top: 0px; right: 0px; height: 9px; width: 9px; background-position: right bottom">
</div>
<!-- -->
</div>
<!-- bottom-center -->
<div style="position: absolute; height: 100%; width: 100%; left: 0px; padding-left: 9px; padding-right: 9px; padding-top: 0px; padding-bottom: 0px">
<div style="background-image: url('Images/CornerHorz.gif'); font-size: 0px; position: relative; right: 0px; left: 0px; height: 9px; width: 100%; background-position: left bottom">
</div>
</div>
<!-- -->
</div>
Вот с какими уровнями вложенности слоев приходится иметь дело, только для того, чтобы добиться броузерной совместимости.
Надо заметить, что средствами Internet Explorer с помощью операции expression, которая осуществляет подстановку javascript в css, позиционирование слоя осуществляется в одно движение. Например, так:
<div style="position: relative; height: 100%; width: 100%; background-color: #9EEEEE"> <div style="position: absolute; top: 9px; left: 9px; height: expression(this.offsetParent.clientHeight - 9); width: expression(this.offsetParent.clientWidth - 18); background-color: #AAAAAA"> (content here) </div> </div>
|
cover
cover cover cover |
Разумеется, в FireFox и Opera это не работает.
Пожалуй, эта задача стоит жизни. FireFox у меня все-таки отобрал день рождения. Поскольку ее решения нет в интенете, я, подумав, решил все-таки опубликовать стилевой роутинг. Вот вам полный пример диалога:
Изображения:
| | |
Стиль:
<style type="text/css">
<!--
/* dialog corners */
.WR { position: relative; height: 100%; width: 100% }
.WA { position: absolute; height: 100%; width: 100% }
.TL { top: 0px; left: 0px; background-position: left top }
.TR { top: 0px; right: 0px; background-position: right top }
.BL { bottom: 0px; left: 0px; background-position: left bottom }
.BR { bottom: 0px; right: 0px; background-position: right bottom }
.DgCC { position: absolute; height: 9px; width: 9px; font-size: 0px;
background-repeat: no-repeat }
.DgCH { font-size: 0px; position: relative; height: 9px; width: 100% }
.DgCV { position: absolute; height: 100%; width: 9px }
.DgPH { left: 0px; padding-left: 9px; padding-right: 9px; padding-top: 0px;
padding-bottom: 0px }
.DgPW { left: 0px; padding: 9px }
.DgPL { left: 0px; padding-bottom: 9px }
.DgPR { right: 0px; padding-bottom: 9px }
.DgPT { left: 0px; padding-left: 0px; padding-right: 0px; padding-top: 9px;
padding-bottom: 0px }
.DgIC { background-image: url('Images/CornerBlue.gif') }
.DgIH { background-image: url('Images/CornerBlueHorz.gif') }
.DgIV { background-image: url('Images/CornerBlueVert.gif') }
.DgIB { background-color: #99FFFF }
.DgIT { background-color: #FF9966; background-image: url('Images/DialogTitle.jpg') }
.DgOS { position: relative; height: 39px; width: 100% }
.DgDH { position: absolute; height: 30px; width: 100%; left: 0px; padding-left: 9px;
padding-right: 9px; padding-top: 9px; padding-bottom: 0px }
.DgDT { position: relative; height: 30px; width: 100%; left: 0px }
.DgDC { background-color: #FF6600; background-image:
url('Images/DialogTitleImage.jpg'); position: absolute;
height: 30px; width: 30px; left: 0px; background-repeat:
no-repeat }
h5.DialogTitle { font-size: 14px; color: blue; text-align: center; padding-top: 0px;
padding-bottom: 0px }
/* FireFox only */
div { box-sizing: border-box; -moz-box-sizing: border-box }
-->
</style>
<!--[if lt IE 7]>
<style type="text/css">
/* add gifs here if png was used in common style */
</style>
<![endif]-->
Код диалога:
<table border="0" cellspacing="0" cellpadding="0"> <tr><td width="260px"> <div class="WR"> <!-- top --> <div class="WA"> <!-- top left --> <div class="DgIC DgCC TL"> </div> <!-- top right--> <div class="DgIC DgCC TR"> </div> <!-- --> </div> <!-- top center --> <div class="WA DgPH"> <div class="DgIH DgCH TL"> </div> </div> <!-- middle --> <div class="WA DgPW"> <!-- left --> <div class="DgCV DgPL"> <div class="DgIV WR TL"> </div> </div> <!-- right --> <div class="DgCV DgPR"> <div class="DgIV WR TR"> </div> </div> <!-- --> </div> <!-- middle-center --> <div class="DgDH"> <!-- center --> <div class="DgDT"> <div class="DgIT WA"> <!-- corner image --> <div class="DgDC"> </div> <!-- dialog title content --> <h5 class="DialogTitle">dialog title</h5> <!-- end dialog title content --> </div> </div> <!-- --> </div> <!-- common --> <div class="WR DgPH"> <!-- top offset --> <div class="DgOS"> </div> <div class="DgIB"> (content here) </div> </div> <!-- bottom --> <div class="WA DgPT"> <!-- left-bottom --> <div class="DgIC DgCC BL"> </div> <!-- right-bottom --> <div class="DgIC DgCC BR"> </div> <!-- --> </div> <!-- bottom-center --> <div class="WA DgPH"> <div class="DgIH DgCH BL"> </div> </div> <!-- --> </div> </td></tr> </table>
Если диалог имеет однотонное заполнение, можно избежать дополнительных изображений и ограничивающих рамок, например, так
|
text here |
Стиль:
/* corner dialog */
.TL { top: 0px; left: 0px; background-position: left top }
.TR { top: 0px; right: 0px; background-position: right top }
.BL { bottom: 0px; left: 0px; background-position: left bottom }
.BR { bottom: 0px; right: 0px; background-position: right bottom }
/* single gif dialog */
.SgCB { background-color: #cfcfcf; background-repeat: repeat; background-attachment:
scroll; position: relative; width: 100%; padding-bottom: 1px;
background-position: 0% 50% }
.SgCC { background-image: url('Images/CornersGray.gif'); background-repeat: no-repeat;
background-attachment: scroll; font-size: 0%; height: 10px;
position: absolute; width: 10px }
.SgOV { padding: 10px }
Код диалога:
<div class="SgCB"> <div class="SgCC TL"> </div> <div class="SgCC TR"> </div> <div class="SgCC BL"> </div> <div class="SgCC BR"> </div> <div class="SgOV"> <p class="ptop">text</p> <p>here</p> </div> </div>
В этом простом примере для компенсации ошибки выключки по нижнему краю используется padding-bottom: 1px. Этого можно избежать использованием внешнего ограничивающего слоя.
Смотрите пример.