HTML 内联 svg 内容错位

Question

如果您查看以下 html http://jsfiddle.net/aLcxj/ + 和 T 图标的位置比它们应有的位置低一位(它们位于其父图标之外)。
html:

<ul class="Grid">
    <li>
        <span>Test1</span>
        <ul class="Manage">
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.334 52.334" version="1.1"  ><path d="m 19.833 0 l 12.667 0 l 0 19.834 l 19.834 0 l 0 12.667 l -19.834 0 l 0 19.832 l -12.667 0 l 0 -19.832 l -19.833 0 l 0 -12.667 l 19.833 0 Z" /></svg>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.812 32.617" version="1.1"><path d="m 29.7119 0 l 1.05591 0.01221 l 0.43335 0.427245 l 0.494385 3.50342 l 0.115966 4.01611 L 31.7017 8.55713 L 31.2012 8.78906 L 30.4504 8.71582 L 30.0049 8.10547 L 28.8574 5.40162 L 27.5146 3.78418 L 26.326 3.13263 L 24.762 2.66724 L 22.8226 2.388 l -2.31476 -0.09308 l -1.5686 0.109864 l -0.653076 0.32959 l -0.07324 0.415039 l 0 24.3408 l 0.183105 1.32752 l 0.549316 0.857543 l 1.09253 0.595093 l 1.81274 0.540161 l 0.726318 0.164795 l 0.323487 0.10376 l 0.24414 0.927734 l -0.537109 0.610352 l -0.274658 -0.0061 l -0.726319 -0.06714 l -5.88379 -0.292969 l -4.76074 0.244141 l -1.29395 0 l -0.317383 -0.585938 l 0.115967 -0.653076 l 0.738525 -0.396728 l 1.75781 -0.592041 l 1.07422 -0.701905 l 0.622559 -1.11694 l 0.20752 -1.64185 l 0 -23.6572 L 13.6475 2.5879 L 12.9883 2.31934 L 12.5793 2.30103 L 11.5479 2.29493 L 7.51953 2.69776 L 4.71192 3.90626 L 3.14331 5.60304 L 1.75781 8.30079 L 1.26343 8.96607 L 0.610354 8.95997 L 0.0427246 8.63647 L 0 8.05664 L 0.640869 4.87671 L 0.854492 0.610351 L 1.22681 0.213624 L 2.34375 0.146484 L 7.89795 0.402832 L 14.0137 0.488282 L 19.5358 0.457762 L 23.9929 0.366212 L 27.3849 0.213625 L 29.7119 2e-006 Z" /></svg>
            </li>
        </ul>
    </li>
    <li>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.334 52.334" version="1.1"><path d="m 19.833 0 l 12.667 0 l 0 19.834 l 19.834 0 l 0 12.667 l -19.834 0 l 0 19.832 l -12.667 0 l 0 -19.832 l -19.833 0 l 0 -12.667 l 19.833 0 Z" /></svg>
    </li>
</ul>

CSS:

body {
    fill: white;
    color: white;
    background-color: black;
    font-size: 2em;
    font-family: "Segoe UI", "Segoe UI Light", "Verdana", "Arial", "Helvetica";
    letter-spacing: 1px;
}

.Grid > li {
    background-color: rgb(229, 20, 0);
    width: 5em;
    height: 5em;
    list-style-type: none;
    float: left;
    padding: 0.25em;
    margin: 0.25em;
    position: relative;
}

.Grid > li > span {
    left: 0.25em;
    bottom: 0.25em;
    position: absolute;
}

.Grid > li > .Manage {
    top: 0.25em;
    right: 0.25em;
    bottom: 0.25em;
    position: absolute;
}
.Grid > li > .Manage > li {
    width: 0.5em;
    height: 0.5em;
    display: block;
    list-style-type: none;
} 

这似乎与父 li 元素的宽度和高度有关，如果我将宽度和高度更改为 1em 而不是 0.5em，那么它们就会正确放置。

它在 IE9、Opera、Chrome 中的行为方式相同..

我做错了什么？

Answer 1

SVG 的初始显示值为 inline，因此它的行为类似于文本。如果你用纯文本替换你的 SVG，你会得到相同的结果，因为它受行高的影响。要克服这个问题，只需设置 svg {display: block;}