| |
|
|
| | Приветствую. Столкнулся с непонятным поведением в ИЕ7.
Суть в коде:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en-US" lang="en-US">
<head><title></title></head>
<style>
.designBox {
border: 1px solid #FF0000;
padding: 5px;
margin: 20px;
background-color: #FFFFFF;
position: relative;
}
.boxHeader {
border: 1px solid #00FF00;
padding:2px;
margin: 2px;
position:relative;
}
.boxHeaderCaption {
border: 1px solid #FFAAFF;
padding: 2px;
margin: 2px;
right:0px;
top:0px;
position:absolute;
}
.boxContent {
border: 1px solid #0000FF;
padding: 2px;
margin: 2px;
overflow: hidden;
position: relative;
}
</style>
<body>
<div class="designBox">
<div class="boxHeader">Block1
<div class="boxHeaderCaption">
<a href="javascript:void(0);"
onclick="el = document.getElementById('div1_id');
if( el.style.display == 'none' )
{el.style.display = 'block';
this.innerHTML = 'Hide';}
else
{el.style.display = 'none';
this.innerHTML = 'Show';}">Hide</a>
</div>
</div>
<div class="boxContent"><div id="div1_id">BlockContent2<br /
>BlockContent2</div></div>
</div>
<div class="designBox">
<div class="boxHeader">Block2
<div class="boxHeaderCaption">
<a href="javascript:void(0);"
onclick="el = document.getElementById('div2_id');
if( el.style.display == 'none' )
{el.style.display = 'block';
this.innerHTML = 'Hide';}
else
{el.style.display = 'none';
this.innerHTML = 'Show';}"
>Hide</a>
</div>
</div>
<div class="boxContent"><div id="div2_id">BlockContent2</div></div>
</div>
</body>
</html>
|
При нажатии на кнопку Hide контент блок второго блока почему-то наезжает на первый блок выходя за рамки своего родительского блока. Почему так? В FF2 не наблюдается, равно как и в IE6.
При этом методом экспериментов было установлено, что такое поведение исчезает, если заменить строки
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US"
lang="en-US">
|
на
Но это по ряду причин неприемлемо. Так же сие поведение пропадает, если убрать из стиля .designBox все, что относится к background. Но если присутствует хотя бы background-color или background-image то баг наблюдается.
Как это исправить?
Заранее спасибо. | |
| |
|
|
| |
|
|
| |
для: murzik
(01.11.2007 в 08:54)
| | | разумного объяснения я не вижу, но могу посоветовать,
опираясь на свой опыт, попробовать поменять теги <a href=....
на дивы. Сичатаю есть большие шансы, что это поможет.
Но может найдется кто то, кто понимает суть проблемы.
Пока она не понятна, приходится искать обходные пути.
Притом использование дива вместо анкора, ни сколько
не ухудшает работу документа, врменами даже улучшает. | |
| |
|
|
| |
|
|
| |
для: arthur
(01.11.2007 в 10:44)
| | | Вы имеете в виду заменить ссылку на кликабельный див?
Если так, то увы, не помогло.
Еще так же заметил, что если убрать у класса .boxContent overflow:hidden; то это так же решает проблему, но порождает другие. :) | |
| |
|
|
| |
|
|
| |
для: murzik
(01.11.2007 в 11:01)
| | | проблема в doctipe попробуйте использовать другой стандарт... | |
| |
|
|
| |
|
|
| |
для: KPETuH
(01.11.2007 в 12:04)
| | | Пробовал. Всегда одно из двух - либо проблема остается, либо исчезает, но вместе с ней все relative блоки выравниваются по левой границе.
Я прихожу к выводу, что ИЕ7 в определенных условиях неадекватно реагирует на position:relative;
Например, если в вышеприведенном коде всем блокам и вложенным в boxContent элементам задать position:static; то все становится на свои места. | |
| |
|
|
