Question

我有以下HTML结构：

HTML

<div class="row">
    <div class="cell">1234</div>
    <div class="cell">5678</div>
</div>

<div class="row">
    <div class="cell">1234</div>
    <div class="cell"><div><svg width="100%" height="100%"></svg></div></div>
</div>

CSS

.row {
    display: table-row;
    background-color: #DADADA;
}

.cell {
    display: table-cell;
    width: 50px;
    height: 25px;
}

FIDDLE

你能告诉我为什么svg单元格的行高于25px？

注意

svg由图书馆呈现，因此我无法设置其高度。

Answer 1

嗯，你澄清了问题是你的两个代码，所以因为svg默认是一个inline元素，你需要使用vertical-align: top;来摆脱height干扰..

svg {
    vertical-align: top;
}

Demo

如果您为svg元素分配id并相应地修改选择器，那会更好。

Answer 2

你有两个问题。

SVG是一个内联元素，如另一个答案中所述，这可以通过给svg一个vertical-align: top样式来解决。
<svg>位于内部<div>元素中，没有宽度/高度样式。 <div>将调整其内容的大小，但内容是一个svg元素，其大小为其容器。结果应该是单元格大小为后备300 x 150宽度/高度，它在Firefox中。

html和svg sizing问题

2 个答案: