IE7 响应式图像故障

Question

所以这很奇怪。

我正在开发一个 Wordpress 主题，并且该主题应该是完全响应式的。我创建了一个“画廊”，其中包含多行 3 个缩略图，当在灯箱中单击打开时。我在网上找到了一段用于创建响应式“方形”元素的代码；仅使用 CSS 调整高度以匹配其响应宽度的元素。这涉及以百分比设置宽度（例如 50%），然后设置 height:0px; 和 padding-bottom:50%;。我继续将每个图像放在一个像这样调整大小的响应式容器中，然后我设置图像的最大宽度和最大高度，这样它们就不会溢出它们的响应式方形容器。

这会在除 ie7 之外的所有浏览器中按预期显示。在ie7中，图像似乎消失了。我附上了一个小提琴（不是我的确切代码，但仍然导致问题）。 http://jsfiddle.net/pwGYc/

这是实际代码：

HTML：

<a href="<? echo $photo["url"]; ?>" class="photo" title="<? echo $photo["title"]; ?>">
    <img src="<? echo $photo["url"]; ?>" alt="<? echo $photo["alt"]; ?>" title="<? echo $photo["title"]; ?>" />
</a>

CSS：

.photo{
float:left;
margin:10px;
width:30%;
height:0px;
overflow:hidden;
padding:5px 0px 30% 0px !important;
box-sizing:border-box;
position:relative;
}

.photo img{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
max-height:97%;
max-width:97%;
}

Answer 1

IE7 不支持border-box。 而且您不能将百分比与绝对 px 值混合使用。所以不要做宽度 30% 和边距 10px。这到底是什么？ 3 x 30% + 3 x 10 像素 = 可能是 1422 像素？ 如果您说保证金 3%，您可以确定 3 x 30% + 3 x 3% = 99%