Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/40.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 将鼠标悬停在IE中绝对位置的缩略图上_Css_Internet Explorer_Thumbnails_Css Position - Fatal编程技术网

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

Css 将鼠标悬停在IE中绝对位置的缩略图上,css,internet-explorer,thumbnails,css-position,Css,Internet Explorer,Thumbnails,Css Position,我已经创建了一个缩略图片的网格,当鼠标悬停在上面时,图片会消失,并显示一个块颜色和图片的标题。但在InternetExplorer中,图片和文本并没有出现在它们设置的缩略图空间中,而是全部缩在左角 图像和标题存储在方框/类别宽屏div中,这是wordpress的动态代码 有什么想法吗 #page-wrap {width: 1060px; padding-bottom: 40px;} .box { margin: 20px; float: left; } .category-widescreen

我已经创建了一个缩略图片的网格,当鼠标悬停在上面时,图片会消失,并显示一个块颜色和图片的标题。但在InternetExplorer中,图片和文本并没有出现在它们设置的缩略图空间中,而是全部缩在左角

图像和标题存储在方框/类别宽屏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:relative,否则它会变得一团糟; 漂浮怎么样?你是否确保事情朝着正确的方向发展? 希望有助于或至少让你大开眼界!哈哈哈…

您需要设置位置:相对于您的帖子,以便绝对定位的元素知道跟随的位置

试试这个:

.post {
position:relative;
}

介意至少给出基本的html结构吗。。最好的是,实际例子页面:谢谢职位:亲戚在我的box Element上工作。。一些图片仍然超出了页边空白,但我现在将对此进行调查!