<!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">
<head>
<title></title>
<style type="text/css">
.parent {
width: 10px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
.child {
border: 1px solid green;
position: relative;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">тут текст</div>
</div>
</body>
</html>
Поведение IE6
На повестке дня возникла такая проблема:
Наверняка, все привыкли к такому поведению IE6: если дочерний элемент шире родительского, IE6 растягивает родительский до его размеров. В данном случае до ширины.
Даже если IE7/FF/Safari/Opera ведут себя правильно.
Если задать дочернему элементу position: relative;, в вышеобозначенных браузерах он ведет себя как надо: родительский не растягивается, а дочерний вылазит за его пределы, что мне и нужно.
Вопрос: как добиться того же самого в IE6?
Наверняка, все привыкли к такому поведению IE6: если дочерний элемент шире родительского, IE6 растягивает родительский до его размеров. В данном случае до ширины.
Даже если IE7/FF/Safari/Opera ведут себя правильно.
Если задать дочернему элементу position: relative;, в вышеобозначенных браузерах он ведет себя как надо: родительский не растягивается, а дочерний вылазит за его пределы, что мне и нужно.
Вопрос: как добиться того же самого в IE6?
Да, небольшое дополнение:
если задавать дочернему элементу position: absolute;, поведение родительского контейнера меня устраивает во всех браузерах. Но вот только сползают не позиционированные элементы под позиционированный. Может быть, этого можно избежать?
Если что-то непонятно, могу примеры быстренько набросать.
если задавать дочернему элементу position: absolute;, поведение родительского контейнера меня устраивает во всех браузерах. Но вот только сползают не позиционированные элементы под позиционированный. Может быть, этого можно избежать?
Если что-то непонятно, могу примеры быстренько набросать.
Цитата: e1vin
position: relative;,
Зачем тебе это? Если это не применять, то и проблемы не будет.
Для IE:
Код:
Видимо, я недостаточно точно выразился. Мне как раз-таки нужно, чтобы дочерний элемент вылазил за пределы родительского, не расширяя его.
Скоро выложу примеры.
Скоро выложу примеры.
Код:
<!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="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
html { font: 12px Arial;
color: white; }
.parent {
float: left;
width: 150px;
background: red;
}
.child { margin-top: 2px;
width: 250px;
background: green;
}
</style>
</head>
<body>
<!-- part1 -->
<div class="parent">
<span class="comment">normal behavior</span>
<div class="child"><span class="comment">child normal behavior</span></div>
<div class="child"><span class="comment">child normal behavior</span></div>
</div>
<div style="float: left; width: 150px; height: 150px; background: blue;"></div>
<br style="clear: both;" /><br /><br />
<!-- part2 -->
<div class="parent">
<span class="comment">normal behavior</span>
<div class="child" style="position: relative;"><span class="comment">child relative positioning</span></div>
<div class="child"><span class="comment">child normal behavior</span></div>
</div>
<div style="float: left; width: 150px; height: 150px; background: blue;"></div>
<br style="clear: both;" /><br /><br />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
html { font: 12px Arial;
color: white; }
.parent {
float: left;
width: 150px;
background: red;
}
.child { margin-top: 2px;
width: 250px;
background: green;
}
</style>
</head>
<body>
<!-- part1 -->
<div class="parent">
<span class="comment">normal behavior</span>
<div class="child"><span class="comment">child normal behavior</span></div>
<div class="child"><span class="comment">child normal behavior</span></div>
</div>
<div style="float: left; width: 150px; height: 150px; background: blue;"></div>
<br style="clear: both;" /><br /><br />
<!-- part2 -->
<div class="parent">
<span class="comment">normal behavior</span>
<div class="child" style="position: relative;"><span class="comment">child relative positioning</span></div>
<div class="child"><span class="comment">child normal behavior</span></div>
</div>
<div style="float: left; width: 150px; height: 150px; background: blue;"></div>
<br style="clear: both;" /><br /><br />
</body>
</html>
Вот.
Я немного неправильно сформулировал задачу. Мне нужно было чтобы фон дочернего элемента перекрывал фон элемента, плавающего справа, что и сделано во второй части примера.
Только вот в IE6 это не работает.
Цитата: e1vin
Только вот в IE6 это не работает.
Ну так я уже привел, что нужно делать:
Код:
<!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="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
html { font: 12px Arial;
color: white; }
.parent {
float: left;
width: 150px;
background-color: red;
border: 2px solid silver;
overflow: hidden;
}
.child { margin-top: 2px;
width: 250px;
background: green;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- part1 -->
<div class="parent">
<span class="comment">normal behavior</span>
<div class="child"><span class="comment">child normal behavior</span></div>
<div class="child"><span class="comment">child normal behavior</span></div>
</div>
<div style="float: left; width: 150px; height: 150px; background: blue;"></div>
<br style="clear: both;" /><br /><br />
<!-- part2 -->
<div class="parent">
<span class="comment">normal behavior</span>
<div class="child" style="position: relative;z-index: 10;"><span class="comment">child relative positioning</span></div>
<div class="child"><span class="comment">child normal behavior</span></div>
</div>
<div style="float: left; width: 150px; height: 150px; background: blue;"></div>
<br style="clear: both;" /><br /><br />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
html { font: 12px Arial;
color: white; }
.parent {
float: left;
width: 150px;
background-color: red;
border: 2px solid silver;
overflow: hidden;
}
.child { margin-top: 2px;
width: 250px;
background: green;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- part1 -->
<div class="parent">
<span class="comment">normal behavior</span>
<div class="child"><span class="comment">child normal behavior</span></div>
<div class="child"><span class="comment">child normal behavior</span></div>
</div>
<div style="float: left; width: 150px; height: 150px; background: blue;"></div>
<br style="clear: both;" /><br /><br />
<!-- part2 -->
<div class="parent">
<span class="comment">normal behavior</span>
<div class="child" style="position: relative;z-index: 10;"><span class="comment">child relative positioning</span></div>
<div class="child"><span class="comment">child normal behavior</span></div>
</div>
<div style="float: left; width: 150px; height: 150px; background: blue;"></div>
<br style="clear: both;" /><br /><br />
</body>
</html>
А запихивать эти правила нужно в CSS в такую секцию, которую только IE6 и будет интерпретировать, а остальные будут считать коментом. В поиск за хаками ;) .
Немного не понял Вас... Какие-такие правила, если для IE6 я стиль так и не нашел подходящий?
Цитата: e1vin
Немного не понял Вас... Какие-такие правила, если для IE6 я стиль так и не нашел подходящий?
А я не пойму про какой ты стил говоришь. Ты хотел в IE6 как в Опере или Лисе. Я тебе код привел. Если его смотреть в IE6 то как раз выходит так же как для твоего кода. Но. В остальных то браузерах при этом отображается уже по другому. Поэтому и говорю, что данное стилевое оформление нужно прятать за коментарием который IE6 воспримет как стилевое оформление, а остальные браузеры нет.
В общем это уже из разряда хаков, поиском порой ибо я их не юзал, хотя примеры кода видел.
Попробуйте заменить border'ы на background'ы и все испортится :)
Цитата:
Мне нужно было чтобы фон дочернего элемента перекрывал фон элемента
Цитата: e1vin
Попробуйте заменить border'ы на background'ы и все испортится :)
Странно, что у меня не портиться (прилагаю скрин в атаче).
Видимо, проблема в разных версиях (билдах?) IE. У меня версия, скачанная с какого-то сайта (не помню уже точно), поставлена параллельно с IE7. Проверил на соседнем компе с родным WinXP'шным IE6, то же самое...
http://gromoff.org.ru/trash/test.png
http://gromoff.org.ru/trash/test.png
Цитата: e1vin
Видимо, проблема в разных версиях (билдах?) IE. У меня версия, скачанная с какого-то сайта (не помню уже точно), поставлена параллельно с IE7. Проверил на соседнем компе с родным WinXP'шным IE6, то же самое...
Ну хз, что там у тебя за браузер. Сейчас опробовал на работе (W2000Pro&SP4 IE6.0.2800&SP1) вижу тоже самое, что и дома (на ХР).
Не знаю-не знаю... Ну его в ж$пу, этот IE6, надоело вести войну на неравных условиях. Заказчики все буржуи, у них техника современная, ПО обновляется регулярно, а в Safari (самый юзаемый у них браузер после IE7) и IE7 все ок :)
Во! Ништяк! alekciy, мое глубочайшее почтение!
Заработал Вами предложеный способ. Правда "overflow: hidden;" предложенное вами, пришлось заменить на "overflow: visible !important; overflow: hidden;" чтобы "hidden" было только для IE6 ;)
Заработал Вами предложеный способ. Правда "overflow: hidden;" предложенное вами, пришлось заменить на "overflow: visible !important; overflow: hidden;" чтобы "hidden" было только для IE6 ;)
Цитата: e1vin
чтобы "hidden" было только для IE6 ;)
О чем я тебе и толковал, когда говорил что нужно писать такие правила, которые только IE6 сочтет за правила оформления и ни кто более.
Да че-то я не так понял... Ладно, тем закрыта :)