ижний DIV реагирует на события поступающие от, DIV'а лежащего выше bug в IE6,7
Эффект или баг наблюдается только в IE 6 и 7 (Opera, FF, Safari все OK)
Суть такая, если поводить мышкой над сереньким слоем(DIV#outerFrame), то ровно в тот момент когда она достигнет уровня розового слоя (DIV#contentsInner) мы увидим alert, что неверно потому что непосредственно на розовый слой мышка не заезжает. Второе, если раскомменитровать объявление цвета фона для слоя DIV#innerFrame, то по какой-то магической и необъяснимой причине сей баг пропадет, но только "для" DIV#innerFrame (не знаю как правильно описать, попробуйте просто раскоментить CSS и повторить эксперимент)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<STYLE>
#page {
BACKGROUND-COLOR: pink;
}
#mainOrder {
LEFT: 217px;
FLOAT: left;
WIDTH: 635px;
Z-INDEX: 100;
}
#outerFrame {
BACKGROUND-COLOR: #DDDDDD;
}
#innerFrame {
WIDTH: 575px;
HEIGHT: 100px;
BORDER: 1px solid black;
/* BACKGROUND-COLOR: olive; */
}
</STYLE>
<script type="text/javascript">
window.onload = function() {
var contObj = document.getElementById("contentsInner");
contObj.onmouseover = function() {
alert("Чихаю");
};
};
</SCRIPT>
</HEAD>
<BODY id="body">
<DIV id="mainOrder">
<DIV id="outerFrame">
<DIV id="innerFrame"></DIV>
</DIV>
</DIV>
<DIV id="page">
<DIV id="contentsInner">Аллергик</DIV>
</DIV>
</BODY>
</HTML>
Обратите внимание, что объявление BORDER в CSS стиле для DIV#innerFrame никак не сказывается, а BACKGROUND-COLOR исправляет баг, хотя только для DIV#innerFrame Буду крайней степени благодарен тому кто сможет пояснить как избавиться от такой назойливой реакции в IE, заранее огромное спасибо! |
#page {
…
margin: 0 0 0 635px;
…
}
|
Octane, ну это все-таки хакерский прием. И он крайне неудобен когда положение DIV#outerFrame изменяется динамически
В моем случае сложность в том, что это упрощенный случай. Мой оригинальный CSS код куда более сложен и там вот так просто изменять margin нижележащего слоя не получиться |
Ну а что вы хотите? CSS-свойство "disableIEFloatingBugs" или что? Есть баг, есть множество вариантов его обхода, верстайте с учетом этого.
Да и не все, что не работает в ИЕ, но работает в других браузерах, есть баг. Вообще вполне логичное поведение всплывания событий, если бы сдвинутый вправо блок (без margin) превышал по высоте блок с float: left; то ожидалось бы, что события всплывают именно таким образом. На деле не знаю, как это будет происходить, надо попробовать... Ну а в JavaScript можно проверять target/srcElement и выводить сообщение в нужном случае. |
Верстать ДИВами и не позаботится о позиционировании (position) или отображении (display)!? Это пример, как не надо делать.
В разных браузерах эти свойства ведут себя по разному, поэтому для MSIE нужно дополнительные разъяснения. В скрипте из вашего листинга, Royan, я заметил пустую строку. Попробуйте воткнуть туда следущее: if (navigator.appName == "Microsoft Internet Explorer") contObj.style.display="inline-block"; Впрочем, задать отображение этого объекта можно и в другом месте. |
Это к чему вообще?
|
Цитата:
|
| Часовой пояс GMT +3, время: 08:21. |