2

我在 Internet Explorer 8 中的流畅布局（使用最大宽度：100% 的图像）遇到了一些问题。当我想将锚标记包裹在灵活宽度的图像和边距、填充和边框周围时，问题就出现了参与其中。这比你想象的要难一些。

所以 HTML 大致是这样的：

<div>
    <a class="image-wrap" href="#">
        <img alt="something" src="/path_to_image.jpg">
    </a>
</div>

和造型：

img { 
    max-width: 100%;
    display: block;    
}

.image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: block;
}

所以我所拥有的是一个流动的图像，被一个带有填充和边框的锚包围。

以上是好的，除非图像小于容器。在这种情况下，锚点的内边距和边框会超出图像（填充容器的整个宽度）。

因此，让我们尝试一些方法来强制锚点适合其内容：

.image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
}

好的，现在锚框没有比图片大，但是锚标签在 Firefox、Opera 和 IE8+ 中又回到了不灵活的状态。但它确实触发了 IE7 中的布局，因此已经处理好了。接下来：

.image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
    max-width: 100%;
}

现在锚点又灵活了，但是当图像开始缩小时，它比容器大12px。锚点根据图像计算宽度，然后添加边框和填充。出于某种原因，Chrome 和 Safari 不这样做。无论如何，备用盒子模型来救援：

.image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
    max-width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

现在它在 Firefox、Chrome、Safari、Opera、IE7、IE9 中按预期工作，但由于某种原因不能在 IE8 中工作。在那里，锚仍然延伸到容器之外。我有点不知道该怎么做，因为box-sizing: border-box应该在 IE8 中得到支持。

我有一个 JSFiddle 页面可以隔离问题http://jsfiddle.net/3gkXU/22/

作为最后的手段，我可​​以使用 JavaScript 来检测锚是否大于其父元素，然后display: block在人们不太可能调整浏览器大小的假设下切换它。我不反对，但这里有 CSS 解决方案吗？

4

1 回答 1

2

看来 IE8 尊重box-sizing: border-box，width但不尊重max-width. 解决方案：忘记box-sizing并插入一个额外的元素。

jsFiddle：http: //jsfiddle.net/wdKGU/1/

新的 HTML：

<div>
    <a class="image-wrap" href="#">
        <span>
            <img alt="something" src="/path_to_image.jpg">
        </span>
    </a>
</div>

新造型：

img {
    max-width: 100% !important;
    display: block;
}

.image-wrap {
    display: inline-block;
    max-width: 100%;
}

.image-wrap span {
    padding: 5px;
    border: 1px solid black;
    display: block;
}
于 2012-01-16T08:36:21.690 回答