Question

我在Internet Explorer 11及更低版本上遇到了问题。

使用显示表集中一个框很容易。问题是当这个盒子里的“main”元素是图像时。

在桌面尺寸中，工作正常，但是，在响应中，图像的最大宽度不起作用。当然，尝试从带有display：table的框中获取max-width没有任何意义。考虑到这一点，我尝试了很多其他属性，但没有成功。

示例：http://jsfiddle.net/v2f73uk8/（在IE上测试）

figure{
    position: relative;
    display: table;
    margin: 0 auto;
}

figcaption{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    -ms-opacity: 0.5;
    opacity: 0.5;
}

img{
    max-width: 100%;
    vertical-align: middle;
}

这个例子基本上就是我的问题所在。 figcaption大小必须与image / figure相同。如果我删除了显示表，则figcaption从图中获得宽度（在这种情况下，100％/块）。

解决这个问题的真正目的是设置最大宽度和宽度：100％到数字（如 wrap 技巧），但是，如果我这样做，这将永远不会动态宽度。

我做什么？

Answer 1

您可以使用inline-block table的{{1}}。这样，图形将始终与图像具有相同的宽度。并设置max-width: 100%;以使其响应。

演示，http://jsfiddle.net/v2f73uk8/1/

body {
    text-align: center;
}

figure{
    position: relative;
    display: inline-block;
    margin: 0 auto; /*no need this anymore*/
    max-width: 100%;
}

figcaption{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    -ms-opacity: 0.5;
    opacity: 0.5;
}

img{
    max-width: 100%;
    vertical-align: middle;
}

注意，我将text-align: center;添加到<body>，以使<figure>居中。

经测试甚至可以回到IE9。

居中：显示表格和最大宽度的img

1 个答案: