foreignObject元素内部奇怪的溢出

Question

每当我想在foreignObject标签内放置一个对象时，我会得到一些奇怪的溢出。 请参考下面的代码。该框扩展为120px，而不是扩展到100x100，这是边框宽度的两倍。我已经尝试了几乎所有想法来抵消这种影响，但似乎没有什么可以解决这个问题。

<svg width="4in" height="3in" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
    <foreignObject width="100" height="100">
        <div style="width:100%;height:100%;background-color: #fcefa1;border:10px solid     #ff0000;"></div>
    </foreignObject>
</svg>

Answer 1

它是边框宽度的两倍，因为两边都有边框，十加十是二十。 Try this：

<svg width="4in" height="3in" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
    <foreignObject width="100" height="100">
        <div style="width:100%;height:100%;background-color: #fcefa1;border:10px solid #ff0000; -moz-box-sizing: border-box; box-sizing: border-box;"></div>
    </foreignObject>
</svg>

box-sizing CSS property可让您控制宽度适用的范围。