在IE中将鼠标悬停在带有绝对位置的缩略图上

Question

我已经创建了一个缩略图的网格，当悬停在上面时，图片消失了块颜色，显示的是图像的标题。但是在internet explorer中，图片和文本不是出现在他们设定的缩略图空间中，而是在左角抽筋。

图片和标题存储在box/ category-widescreen div中，这是wordpress的一个动态代码。

有什么想法吗？

#page-wrap {width: 1060px; padding-bottom: 40px;}
.box { margin: 20px; float: left; }

.category-widescreen { width: 400px; height: 229px; background: #FF0000; }
.category-widescreen a{text-decoration: none;}
.category-widescreen h1{font-size: 30px; color: #FFF; line-height: 34px;}
.category-widescreen h2{font-size: 26px; color: #FFF;  line-height: 30px;}

.title{position:absolute; top:14px; left:14px; z-index: 0; padding-right: 14px;}

.category-widescreen img { max-width: 400px; max-height: 229px; float: right; padding: 0 0 2px 10px; z-index:1; position:relative;}

感谢您的帮助！

Answer 1

太模糊了！正如另一个人所建议的，给出基本的html结构。然而，一些观察结果：

字体是不是太大了(30px和26px)？

标题{位置:绝对；...} ....确保父对象的样式为position:relative，否则它会变得一团糟；

浮动怎么样？你有没有确保事情朝着正确的方向发展？

希望对你有所帮助，或者至少让你大开眼界！哈..。

Answer 2

您需要将position:relative设置为您的帖子，以便绝对定位的元素知道在哪里跟随。

试试这个：

.post {
position:relative;
}