Question

说我有3个跨度包裹在div中。

<div>
    <span>1/1/2000</span>
    <span>-</span>
    <span>1/2/2000</span>
</div>

浏览器应该将跨度之间的换行解释为空格，以便结果显示如下：

1/1/2000 - 1/2/2000

......不像其中任何一个

1/1/2000-1/2/2000
1/1/2000- 1/2/2000
1/1/2000 -1/2/2000

...当跨度没有敲除绑定时，IE8就是这种情况。如果您使用IE8 Developer工具检查上述标记，您可以清楚地看到＆＃34; 文本 - 空文本节点＆＃34;每次跨度后。

<div>
    <span>1/1/2000</span>
    Text - Empty Text Node
    <span>-</span>
    Text - Empty Text Node
    <span>1/2/2000</span>
    Text - Empty Text Node
</div>

但是，只要我在这样的跨度上放置了敲除绑定，空文本节点行为就会改变：

<div>
    <span data-bind="text: start"></span>
    <span data-bind="visible: end">-</span>
    Text - Empty Text Node
    <span data-bind="text: end"></span>
    Text - Empty Text Node
</div>

...前两个跨度之间的空文本节点看起来像是被剥离了。这是一个淘汰赛的错误吗？任何解决方法？这是使用版本2.3.0。

Answer 1

knockout::text-binding文档中描述的空格存在问题（请参阅注释4 ，可能是您的IE已经 Quirk模式：ON ）。
Knockout的解决方案是将某些东西放到span。

<div>
    <span data-bind="text: start">&nbsp;</span>
    <span data-bind="visible: end">-</span>
    <span data-bind="text: end">&nbsp;</span>
</div>

此外，您可以使用单个span元素：

<div>
    <span data-bind="text: start + (end ? ' - ' : '') + end"></span>
</div>

如何防止淘汰从IE8跨度兄弟中剥离空文本节点

1 个答案: