‹br› внутри ‹pre› работает в Safari, но не в Chrome или Edge?

Я использую <br> внутри тега <pre> (например, <pre>Foo<br>10</pre>), и это правильно отображается в Safari (v12.0.3) в виде двух строк, но как Foo10 в Chrome 72.0.3626.109 (в Mac OS High Sierra) и Microsoft Edge 42.17134.1.0 (в Windows 10).

Руководство разработчика Mozilla говорит, что <br> является " фразовое содержание», разрешенное в <pre>.

Исходный код генерируется htmlWidgets и networkD3, и я отследил код Javascript, который генерирует код <pre>, в sankeyNetwork.js (создает диаграммы Санки).

Я взял автоматически сгенерированный 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>?


google-chrome html safari microsoft-edge networkd3
person Mac471    schedule 24.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я воспроизвел вашу проблему на своей стороне. И после тестирования я обнаружил, что проблема может быть из-за тега.

Вот мой тестовый код.

    <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>

внутри заголовка

внешнее название

На скриншоте видно, что br внутри и снаружи выглядит по-разному. Так что я думаю, может быть, это проблема.

Я проверил документ MDN https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title, но объяснения, похоже, нет. Так странно.

person Jenifer Jiang    schedule 25.02.2019
comment
Интересный. Для какого браузера этот результат? Хром? - person Mac471; 26.02.2019
comment
И в Хроме, и в IE. Для тестирования я думаю, что, возможно, это связано с поведением браузера. Я также тестирую это в IE, в то время как br хорошо работает в IE. Так что, я думаю, возможно, в большинстве последних браузеров все это ведет себя так, как будто br не работает в названии. - person Jenifer Jiang; 26.02.2019