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

时间:2011-11-07 13:38:36

标签: css internet-explorer thumbnails css-position

我已经创建了一个缩略图片网格,当它们悬停在上面时,图片消失了一个块颜色,并显示图像的标题。但是在互联网资源管理器中,而不是在设置的缩略图空间中出现的图片和文字,它们都会在左下角噼啪作响。

图像和标题存储在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;}

谢谢你的帮助!

2 个答案:

答案 0 :(得分:0)

太模糊了!正如另一个人建议的那样,给出基本的html结构。但是,有些意见:
使用的字体大小是不是太大了(30px和26px)? 标题{位置:绝对的; ......} ....确保父母用位置设置样式:相对否则它会变得混乱;
漂浮怎么样?你确定东西正朝着正确的方向浮动吗?
希望已经帮助或者至少让你大开眼界!哈哈哈......

答案 1 :(得分:0)

您需要将position:relative设置为您的帖子,以便绝对定位的元素知道要关注的位置。

试试这个:

.post {
position:relative;
}