带有浮动元素的 Safari 错误（？）？
Safari bug (?) with floating elements?
我发现一个奇怪的问题与我正在处理的布局有关，该代码示例在桌面 Safari 中错误呈现。 div#shim 显然是触发浏览器错误呈现文本的原因。有人以前见过这个或知道解决方法吗？
<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.
似乎比较混乱的是两个浮动的div中的明确设置。
奇怪的是，它们似乎有一种反直觉的效果。在 Safari 中，文本的第一行流入右侧浮动 div（并持续等于总宽度的量）。
删除这些清除似乎可以解决问题。
假设您确实希望在显示任何其他内容之前清除所有内容，此代码段明确说明：在文本之后（并在之后显示更多文本只是为了证明它确实已清除）。
在 iPad IOS14 Safari 上测试过，无论文本太短而无法在浮动的 divs 下方流动，还是文本太长以至于在浮动 divs 下方流动，它似乎都能正常工作填充它们之间的space。
<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.
好吧，我已经用几种不同的方式（分词、添加 div 等）玩过这个，看起来 Safari 在浮动旁边布置一行时的行为是首先检查左边的浮动文本行的top only，来计算行的宽度。这与该行 底部 处的较宽浮动冲突。
如果它把它画在它计算的地方，你会看到文本的底部绘制在较低的浮点上。
但是因为当它绘制它时，它确实将左边缘正确地放在了最右边的浮点上，所以它把它推离了屏幕的右侧；有时它甚至从那里开始。 shapeOutside 作为一个普通的盒子也是一样的原理。
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,
我发现一个奇怪的问题与我正在处理的布局有关，该代码示例在桌面 Safari 中错误呈现。 div#shim 显然是触发浏览器错误呈现文本的原因。有人以前见过这个或知道解决方法吗？
<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.
似乎比较混乱的是两个浮动的div中的明确设置。
奇怪的是，它们似乎有一种反直觉的效果。在 Safari 中，文本的第一行流入右侧浮动 div（并持续等于总宽度的量）。
删除这些清除似乎可以解决问题。
假设您确实希望在显示任何其他内容之前清除所有内容，此代码段明确说明：在文本之后（并在之后显示更多文本只是为了证明它确实已清除）。
在 iPad IOS14 Safari 上测试过，无论文本太短而无法在浮动的 divs 下方流动，还是文本太长以至于在浮动 divs 下方流动，它似乎都能正常工作填充它们之间的space。
<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.
好吧，我已经用几种不同的方式（分词、添加 div 等）玩过这个，看起来 Safari 在浮动旁边布置一行时的行为是首先检查左边的浮动文本行的top only，来计算行的宽度。这与该行 底部 处的较宽浮动冲突。 如果它把它画在它计算的地方，你会看到文本的底部绘制在较低的浮点上。 但是因为当它绘制它时，它确实将左边缘正确地放在了最右边的浮点上，所以它把它推离了屏幕的右侧；有时它甚至从那里开始。 shapeOutside 作为一个普通的盒子也是一样的原理。
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,