Question

我有一个非常简单的代码，适用于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 the size again
svgContainer
    .style("width",200)

HTML

<body>        
</body>

在chrome中，矩形绘制，但不在firefox上。好像你不能再次改变样式元素的值。奇怪，不是吗？

这是一个JSFIDDLE http://jsfiddle.net/cUmXu/2/

编辑：实际上，您可以更改该值，但是如果您给予宽度的第一个值为0，则不能更改。这甚至是奇怪的。

第二次编辑：似乎在使用时

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

它有效。如果有人知道原因，请分享。

Answer 1

使用您的代码

svgContainer
    .style("width",200)

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

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

在Firefox上我们只是

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

Chrome对Firefox的一些错误更加宽容。 width可以有不同的单位，如％，em，pt，px ......所以你必须提供大于0的单位。但是允许0不带单位，因为0em与0px相同。

来自CSS Values and Units Module Level 3：

长度是指距离测量值，在属性定义中表示。长度是一个维度。但是，对于零长度，单位标识符是可选的（即可以在语法上表示为'0'）。

所以，用

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

我们也得到适当的Firefox宽度：

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

另见Fallback for CSS attributes without unit

宽度= n的Firefox元素不显示

1 个答案: