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 10px =可能是1422px？如果你说保证金3％，你可以确定3 x 30％+ 3 x 3％= 99％

IE7响应式图像故障

1 个答案: