html - div 内的 SVG Rect 定位不正确

Question

我已将 SVG 矩形放入 div 中:

    <div id="box1">
        <svg xmlns="http://www.w3.org/2000/svg" width="102px" height="171px">
            <rect width="102px" height="171px" style="fill:#00ACEC; fill-opacity:1;"/>
        </svg>
    </div>
    <div id="box2">
        <svg xmlns="http://www.w3.org/2000/svg" width="162px" height="14px">
            <rect width="162px" height="14px" style="fill:#BEBEBE; fill-opacity:1;"/>
    </div>

两个矩形在底部正确对齐。

但是，如果我将高度降低 2px 并相应地更新顶部，则 svg 矩形会向下移动，但它仍应像以前一样底部对齐。

参见此处:http://jsfiddle.net/mw1skze1/3/

问题出现在较小的矩形上。我是否遗漏了什么或者这是 svg 渲染的问题？

Answer 1

解决方案:在svg中添加css位置继承。

position: inherit

div 对齐良好。您可以在 Fiddle 中看到对齐方式，我在 div 中添加了边框，以便您可以判断它们的对齐方式。

它的 box4 的 svg 和 div 没有对齐。

border:1px solid red;

看看:

http://jsfiddle.net/2dc3waqt/