Так что у меня довольно раздражающая проблема с IE, которую я просто не могу понять.Предпосылка довольно проста: у меня есть изображение, и при наведении на него отображается какой-то текст с полупрозрачным фоном.Отлично работает в Firefox, Safari и Chrome.Однако в IE он не накладывает div друг на друга и не подчиняется атрибуту float.Вот код CSS:
.new-product-link {
background:#E0E0E0;
height:342px;
}
.new-product-link .new-container {
float:left;
width:94px;
height:94px;
padding:3px;
margin:6px 5px;
position:relative;
left:2px;
border:1px solid #BBB;
}
.new-product-link .new-container:hover {
border:1px solid #777;
cursor:pointer;
}
.newProduct {
float:left;
height:100px;
width:100px;
position:relative;
bottom:97px;
right:3px;
background:#777;
opacity:0.75;
display:none;
}
.newProduct span {
position:relative;
top:20px;
color:#F0F0F0;
font:bold 14px Arial;
}
.newProduct span span {
font:11px Arial;
}
JS:
<script>
$(".new-container").hover(
function () {$(this).children("div").fadeIn(350);},
function () {$(this).children("div").fadeOut(100);}
);
</script>
HTML:
<div align="center" class="new-container">
<img src="http://www.example.com/image.png">
<div class="newProduct">
<span class="newProduct-item">Item Number<br />
<span>Click for Additional<br />Information</span>
</span>
</div>
</div>
Рабочий пример см. ЗДЕСЬ .Все кажется довольно простым и прекрасно работает в других основных браузерах, надеюсь, кто-то увидит ошибку моего пути.Спасибо за помощь и предложения.