Question

我正在尝试使用表格中的某些图片制作或多或少的响应式布局。所以我认为我应该使用SVG，现在做的一切正常，除了使用Internet Explorer：我在td元素中有一个内联SVG，如果SVG根据父元素重新调整大小会很好。无论我尝试什么，我都无法存档。这里有一个简化的例子：

HTML

<table id="F">
    <tr>
        <td class="container">
            <svg id="bar-graph" viewBox="0 0 100 100" preserveAspectRatio="none">
                        <rect height="100" width="100"></rect>
            </svg>
        </td>
        <td class="container" style="background-color:red;"></td>
    </tr>
</table>

CSS

.container {
    width:50%;
}
#bar-graph {
    height:100%;
    width:100%;
}
#F {
    width:50px;
}

以下是小提琴中的例子： http://jsfiddle.net/julianrath/v9hpazun/13/

如果您使用Firefox或Chrome打开它并重新调整输出窗口的大小两者 tds将占用表空间的50％（在示例中为~25px）。在Internet Explorer中，内联SVG根本不会重新调整大小。

编辑：使用IE9和IE11进行测试。

编辑：更正小提琴链接

Answer 1

好的，我今天了解到table-layout是一个非常重要的属性，如果你想在表格中依赖于表格的布局而不是相反的方式（根据内容缩放表格布局）的表）。不幸的是，Internet Explorer和其他人对table-layout:auto属性有不同的理解。

#F {
    width:50px;
    table-layout:fixed;
}

http://jsfiddle.net/julianrath/v9hpazun/26/

表中的SVG未在Internet Explorer中缩放

1 个答案: