9

过去，我回答了一个关于 SVG 图像overflow: hidden在 IE9 中没有被“裁剪”（答案就在这里。

今天，在再次查看 HTML5 Boilerplate 时，我注意到他们声称他们“[正确]溢出没有隐藏在 IE9 中”，并使用以下代码：

svg:not(:root) { overflow: hidden; }

我正在寻找某人通过指出 HTML5 或 SVG 规范中的其他注释来确认或否认我的原始研究。我找不到任何东西，但我想确保我没有遗漏任何东西。

我能找到的最好的是他们正在尝试在此处应用规则 7 ，但这应该仅适用于 SVG 文档，例如通过img标签或直接加载时。

4

2 回答 2

4

使用您指定的理由（特别是规范的第五和第七点），您的原始答案对我来说似乎是合理的。

IE 是正确的而 Webkit 和 Firefox 不是正确的似乎极不可能。但是，您怀疑第七个要点是差异化因素。

如果您在 Chrome 中加载此测试用例并使用开发者工具检查 SVG，您将看到：

(user agent stylesheet)

svg:not(:root), symbol, image, marker, pattern, foreignObject {
  overflow: hidden;
}

如果您在 Firebug 中启用“显示用户代理 CSS”，您会在 Firefox 中看到以下规则：

svg.css (line 49) <System>

svg:not(:root), symbol, image, marker, pattern, foreignObject {
  overflow: hidden;
}

最后，如果您编辑要添加的测试用例，svg { overflow:hidden }则 IE 在视觉上与其他浏览器匹配。

因此，在我看来，所有三种浏览器的行为都符合规范，但 Chrome/Safari/FF 都具有更符合大多数用户期望的 UA 规则。

如果我可以独自离开，这就是我要停止回答的地方。

但是，如果您编辑测试用例添加svg { overflow:visible }，Chrome 和 Firefox 都不会“正确”显示溢出的内容。我不确定如何用这个答案的其余部分来解决这个数据点。：/

于 2012-04-09T18:18:07.633 回答
4

SVG 规范有这样的说法：http ://www.w3.org/TR/SVG/styling.html#UAStyleSheet

似乎类似于 Firefox 和 Chrome 不做的事情？

于 2012-04-09T18:52:18.540 回答