Javascript 宽度为n的Firefox元素不'；不显示_Javascript_Css_Svg_Cross Browser_D3.js

Javascript 宽度为n的Firefox元素不'；不显示

javascript css svg d3.js

Javascript 宽度为n的Firefox元素不'；不显示,javascript,css,svg,cross-browser,d3.js,Javascript,Css,Svg,Cross Browser,D3.js,我有一个非常简单的代码，可以在Chrome上运行，但不能在firefox上运行： JS //Creating the svg element svgContainer= d3.select("body") .append("svg") //fill it with blue and set it's width to 0 svgContainer .style("background-color","blue") .style("width",0); //change

我有一个非常简单的代码，可以在Chrome上运行，但不能在firefox上运行：

//Creating the svg element
svgContainer= d3.select("body")
    .append("svg")

//fill it with blue and set it's width to 0
svgContainer
    .style("background-color","blue")
    .style("width",0);

//change the size again
svgContainer
    .style("width",200)

HTML

<body>        
</body>

它起作用了。如果有人知道原因，请与您的代码共享。

svgContainer
    .style("width",200)

您创建了以下元素（Chrome）：

在Firefox适当的宽度下，我们也可以得到：

<svg style="background-color: blue; width: 200px;">

另请参见

这仅仅是因为不同的浏览器如何解释不明确的尺寸规格。对于尺寸样式，没有单位0是可以的；所有其他数字都需要单位，因为px不是唯一一个可能的单位。除了特殊值0之外，单位对于CSS长度是必需的。这是一个Chrome bug，因为它没有遵循CSS 2.1规范，即。

<svg style="background-color: blue; width: 200px;"></svg>

<svg style="background-color: blue; width: 0px;">

svgContainer
    .style("width", "200px")

<svg style="background-color: blue; width: 200px;">