gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:25:16 24 4
gpt4 key购买 nike

我创建了一个缩略图网格,当鼠标悬停在上面时,图片会消失,显示 block 状颜色,并显示图片标题。但在 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;}

谢谢你的帮助!

最佳答案

太模糊了!正如其他人所建议的那样,给出基本的 html 结构。然而,一些观察:
使用的字体大小是不是有点太大(30px 和 26px)?;
标题{position:absolute; ...} ....确保父级的样式为 position:relative 否则它会变得一团糟;
float 怎么样?您是否确保事情朝着正确的方向 float ?

希望对您有所帮助,或者至少让您大开眼界!哈哈哈……

关于css - 将鼠标悬停在 IE 中具有绝对位置的缩略图上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8037215/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com