奇怪的矩形元素宽度和高度行为仅在 Chrome 中答案

【问题标题】：Weird rect element width and height behaviour only in Chrome奇怪的矩形元素宽度和高度行为仅在 Chrome 中
【发布时间】：2020-05-16 18:00:30
【问题描述】：

我有一个 SVG，它仅由一个矩形组成，用作模态框的框架，SVG 位于模态框的顶部。我正在做一些测试，发现矩形是being cut off。调出检查器显示了原因：矩形元素超过了10,000 times larger than it should be，尽管它们的宽度和高度值各为 100%。而且由于 SVG 视口的行为符合预期，它会切断其余部分。

Rechecking the width/height toggles fixes the issue temporarily - 刷新页面时恢复到不正确的大小 - 表明问题不在于 CSS 值本身。

这种行为仅在 Chrome 中很明显，并且在 Firefox 和 Safari 中按预期完美运行，所以看起来问题出在 Chrome 上，但在我得出任何结论之前，我希望有一些 StackOverflow 专业知识。

【问题讨论】：

标签： html css google-chrome firefox svg

【解决方案1】：

原来的问题是我必须在 rect 道具中传递 width=100% 和 height=100%（因为我正在使用 React）而不是把它放在 CSS 中，不知道为什么 Chrome 有不同的行为不过。

【讨论】：