IE7 溢出问题答案

【问题标题】：Issue with overflow in IE7IE7 溢出问题
【发布时间】：2011-07-26 12:06:58
【问题描述】：

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

在 Google Chrome、Firefox 或任何非 IE7 浏览器上，此布局可按预期工作。标签（特别注意照片“城市人”和“万花筒”）在边缘被切断并设置为半透明度。鼠标悬停时，边缘会显示出来并设置为完全不透明。

但是，在 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);

【问题讨论】：

【解决方案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 来调整样式以获得所需的输出。但后来我注意到水平滚动条出现了，这可能意味着你需要更多的挖掘来找出如何摆脱它。

【讨论】：

【解决方案2】：

提供 .photo-tags-inner position:absolute 和 left:0 解决了 IE7 中的问题，并且在其他浏览器中也可以正常工作。

【讨论】：