Html IE7响应图像故障

所以这是一个奇怪的问题

我正在研究一个Wordpress主题，这个主题应该是完全响应的。我创建了一个“图库”，它由多行3个缩略图组成，当在灯箱中单击打开时，这些缩略图就会显示出来。我在网上找到了一段代码，用于创建响应性的“方形”元素；仅使用CSS调整高度以匹配其响应宽度的元素。这包括设置宽度的百分比（比如50%），然后设置高度：0px和

填充底部：50%。我继续将每个图像放在一个响应容器中，这样可以调整大小，然后设置图像的最大宽度和最大高度，这样它们就不会溢出响应的方形容器

这在除ie7之外的所有浏览器中都会按预期显示。在ie7中，图像似乎消失了。我附加了一个fiddle（不是我的确切代码，但仍然会导致问题）

以下是实际代码：

HTML:

IE7不支持。
您不能将百分比与绝对px值混合。所以不要做30%的宽度和10px的边距。这总共是什么？3 x 30%+3 x 10px=1422px？
如果你说margin 3%，你可以确定3x30%+3x3%=99%
边框框不会导致框中的内容在ie7中消失，是吗？这条规则将被忽略。另外，我实际上并没有在这样的代码中使用百分比，但当我复制过来时，我试着压缩和速记。实际上我有
填充
：
5px 0px 5px 0px
，然后再往下看，我有
填充底部：30%
<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>

.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%;
}