gpt4 book ai didi

javascript - width=n 的 Firefox 元素不显示

转载 作者:行者123 更新时间:2023-11-29 09:52:20 26 4
gpt4 key购买 nike

我有一个非常简单的代码,可以在 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")

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

最佳答案

用你的代码

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

关于javascript - width=n 的 Firefox 元素不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20166745/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com