Firefox CSS 和/或 D3 的区别答案

【问题标题】：Firefox CSS and/or D3 differenceFirefox CSS 和/或 D3 的区别
【发布时间】：2015-03-29 02:27:27
【问题描述】：

所以我在一个网站上有一个页面，它在 IE 和 Chrome 中的显示方式与它在 IE 和 Chrome 中的显示方式完全相同，但在 Firefox 中却没有。链接是http://www.jakerevans.com/?page_id=61。在 IE 和 Chrome 中，旋转动画（用 D3.js 编写）完全通过 padding-left 和 padding-top 显示，但在 Firefox 中不显示。任何人都知道如何使 Firefox 中的填充透明？还有其他可能的解决方案吗？如果可能的话，我真的很想通过 CSS 解决这个问题，而不是用 D3 代码回到绘图板上。很明显，如果必须的话，我会的。

非常感谢您的帮助！！！

【问题讨论】：

标签： html css firefox svg d3.js

【解决方案1】：

您需要在 <svg> 元素上显式设置 overflow: visible。

SVG 规范规定，所有创建视口的 SVG 元素都应在浏览器的默认样式表中包含 overflow: hidden。但是，浏览器在这是否应该包括填充区域方面存在分歧：如果您像 Firefox 那样关注the description in the SVG specs，则不会包括填充。但是，一般的 CSS/HTML 布局不认为 padding 中的内容溢出，所以 Webkit/Blink/IE 浏览器不会用overflow:hidden 裁剪它。

【讨论】：

太棒了，一行简单的 CSS 就奏效了！我想我已经在 iframe 本身上尝试过，但显然不是在 svg 元素上。感谢您的帮助！

【解决方案2】：

这似乎不是填充的问题，它就像是 firefox 转换原点的东西，请参阅Setting transform-origin on SVG group not working in FireFox

【讨论】：