inside works in Safari but not Chrome or Edge?

问题描述 投票：0回答：1

我在<br>标签中使用<pre>（例如<pre>Foo<br>10</pre>），这在Safari（v12.0.3）中正确显示为两行但在Chrome 72.0.3626.109（在Mac OS High Sierra上）和Microsoft Edge 42.17134.1.0（在Windows上）中的Foo10 10）。

Mozilla Developer Guide说，<br>是<pre>允许的“措辞内容”。

原始代码由R htmlWidgets和networkD3包生成，我跟踪生成<pre>代码的Javascript代码到sankeyNetwork.js（生成Sankey图）。

我已经采用了自动生成的html文件，并尽可能地剥离出来以突出显示此问题。当您打开此html文件并将鼠标悬停在左侧栏上时，您应该在两行上看到“Foo”和“10（$）”。在Safari中，这可行，但在Chrome和Edge中，它没有。如果你将鼠标悬停在“Bar”栏上（没有双关语），你将总是在两行上看到“Bar”和“10（$）”因为我们只是在<br>块中使用换行而不是<pre>。

这是html文件：

<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div>

<svg viewBox="0,0,1134,633" style="width: 100%; height: 100%;">
<g transform="translate(20,20)">

<g class="node" transform="translate(0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<rect height="593" width="30" style="fill: rgb(31, 119, 180); stroke: rgb(15, 58, 88); opacity: 0.9; cursor: move;">
<title><foreignObject><body><pre>Foo<br>10 ($)</pre></body></foreignObject></title></rect>
<text x="36" y="296.5" dy=".35em" text-anchor="start" style="font-size: 10px; font-family: Arial;">Foo</text></g>

<g class="node" transform="translate(1064,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<rect height="593" width="30" style="fill: rgb(174, 199, 232); stroke: rgb(85, 98, 114); opacity: 0.9; cursor: move;">
<title><foreignObject><body><pre>Bar
10 ($)</pre></body></foreignObject></title></rect>
<text x="-6" y="296.5" dy=".35em" text-anchor="end" style="font-size: 10px; font-family: Arial;">Bar</text></g>

</g>
</svg>
</div>

</body>
</html>

简单的解决方法是更改​​sankeyNetwork.js并用<br>替换\n，我将在networkD3 GitHub页面上提出这个问题。

知道为什么Chrome和Edge没有正确渲染<br>标签吗？

html google-chrome safari microsoft-edge networkd3
1个回答
0
投票

我已经转载了你的问题。经过测试，我发现问题可能是因为标签。

这是我的测试代码。

    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" style="cursor: help;">
            <!--<pre>Foo<br>10 ($)</pre>-->
            <title>
                <pre>Foo<br>10 ($)</pre>
            </title>
        </circle>
    </svg>

inside title

outside titlte

您可以从屏幕截图中看到，内部和外部的br显示不同。所以我想也许这就是问题所在。

我已经检查了MDN文件https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title，但似乎没有解释。这么奇怪。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.