Блог

Я проследил странную проблему с макетом, над которым я работаю, в этом компактном примере кода, который неправильно отображается в настольном Safari. Прокладка div#, по-видимому, является причиной того, что браузер неправильно интерпретирует текст. Кто-нибудь видел это раньше или знает, как это исправить?

 <div id=shim style="float: left; height: 3px; outline: thin solid blue;"></div>
<div style="float: left; clear: left; width:50%; height: 50px; outline: thin solid red;">50%</div>
<div style="float: right; clear: right; width:10%; height: 50px; outline: thin solid red;">10%</div>

Here is some text to show the bug. 
Here is some text to show the bug. 
Here is some text to show the bug. 
Here is some text to show the bug. 
Here is some text to show the bug. 
Here is some text to show the bug.
 

Что, по-видимому, сбивает с толку, так это четкие настройки в двух плавающих дивах.

Странно, но они, похоже, оказывают противоречивый интуитивный эффект. В Safari первая строка текста перетекает в правый плавающий div (и продолжается на величину, равную общей ширине).

Удаление этих очистителей, по-видимому, устраняет проблему.

Предполагая, что на самом деле вы хотите, чтобы все было очищено до того, как будет показано что-либо еще, этот фрагмент ставит ясно: как после текста (и показывает еще немного текста после этого, просто чтобы доказать, что он действительно очищен).

Протестировано на iPad IOS14 Safari, где, похоже, работает либо с текстом, слишком коротким, чтобы проходить под плавающими разделителями, либо с текстом настолько длинным, что он проходит под ними после заполнения пространства между ними.

 <div id=shim style="float: left; height: 3px; outline: thin solid blue;"></div>
<div style="float: left; width:50%; height: 50px; outline: thin solid red;">50%</div>
<div style="float: right; width:10%; height: 50px; outline: thin solid red;">10%</div>

Here is some text to show the bug. 
Here is some text to show the bug. 
Here is some text to show the bug. 
Here is some text to show the bug. 
Here is some text to show the bug. 
Here is some text to show the bug.
<div style="clear: both;"></div>
This is some stuff coming afterwards to show that it clears both the text and the red bordered divs no matter what the length of the text between those divs is. 

Ну, я играл с этим несколькими различными способами (разрыв слов, добавление разделителей и т. Д.), И похоже, что поведение Safari при размещении строки рядом с поплавком заключается в том, чтобы сначала изучить левый поплавок только в верхней части текстовой строки, чтобы рассчитать ширину строки. Это противоречит более широкому поплавку в нижней части строки. Если бы он нарисовал его там, где рассчитал, вы бы увидели нижнюю часть текста, нарисованного поверх нижнего поплавка. Но поскольку, когда он рисует его, он правильно помещает левый край в крайнее правое положение на линии, он отталкивает его с правой стороны экрана; иногда он даже начинается там. Тот же принцип виден с внешней стороны формы как обычная коробка.

Chrome, Firefox и Edge показывают правильный расчет, они учитывают высоту плавающей строки. Поэтому мне придется интерпретировать это как ошибку в вычислении текста в Safari, которая не имеет дизайна или обходного пути CSS-не имеет значения, что вы делаете, если основной текст пересекает границу между двумя поплавками, где нижний шире, линия будет слишком длинной или даже, если нижний поплавок имеет ширину 100%, начните под полосой прокрутки.

 <div style="float:left; clear: left; width: 50px; height: 0.3em; background: red;"></div>
<div style="float:left; clear: both; width: 100px; height: 0.3em; background: green;"></div>
<div style="float:left; clear: left; width: 25px; height: 0.3em; background: blue;"></div>
1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9,