html - IE7 响应图像故障

Question

所以这很奇怪。

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

这在除 ie7 之外的所有浏览器中都按预期显示。在ie7中，图像似乎消失了。我附上了一个 fiddle (不是我的确切代码，但仍然会导致问题)。 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 值混合使用。所以不要做 width 30% 和 margin 10px。这总的来说是什么？ 3 x 30% + 3 x 10px = 也许是 1422px？ 如果你说 margin 3% 你可以确定 3 x 30% + 3 x 3% = 99%