css - IE7 中的溢出问题

Question

我遇到了与溢出相关的 IE7 问题。 http://www.photocrayze.com/photos

在 Google Chrome、Firefox 或任何非 IE7 的浏览器上，此布局按预期工作。标签(具体看照片“City People”和“Kaleidoscopic”)在边缘被切掉并设置为半不透明。鼠标悬停时，边缘会显示出来并设置为完全不透明。

但是，在 IE7 中，当您将鼠标悬停在照片上时，div.photo-tags-inner 会展开并弄乱布局。我不确定如何更好地解释这个问题……但我该如何解决这个问题？

此外，将不透明度设置为 0.5 似乎在 IE8 中不起作用(但在 IE7 和 IE9 以及其他浏览器中有效)...

zoom: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
opacity: 0.5;
filter: alpha(opacity=0.5);

Answer 1

在你的CSS样式中

.photo-browser tr td .photo-info .photo-tags {
margin: 0.5em auto auto;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 200px;
}

摆脱隐藏的溢出，它应该工作。下次还可以使用 firexfox 的 Firebug 来调整样式以获得所需的输出。但是后来我注意到水平滚动条出现了，这可能意味着您需要进行更多挖掘以找出如何摆脱它。