Question

我在Internet Explorer 8中使用流畅布局（使用max-width：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。在那里，锚仍然延伸到容器外面。我有点难以理解该做什么，因为IE8应该支持box-sizing: border-box。

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

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

Answer 1

似乎IE8尊重box-sizing: border-box的{{1}}，但不尊重width。解决方案：忘记max-width并插入一个额外的元素。

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

新HTML：

box-sizing

新造型：

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

在Internet Explorer 8中围绕流体图像锚定标记

1 个答案: