我怎样才能让 Chrome 和 Firefox 一样对待浮动周围的表格？答案

【问题标题】：How can I make Chrome and Firefox treat tables around floats the same?我怎样才能让 Chrome 和 Firefox 一样对待浮动周围的表格？
【发布时间】：2019-04-21 23:46:32
【问题描述】：

我正在研究一种将右浮动图像向下移动并使内容环绕顶部、侧面和底部的方法。

然后，因为我想要一个垂直居中的内容要点，我决定使用单行表。（我找不到不使用表格的方法...）

那时我意识到 Chrome 和 Firefox 不会将表格包裹在浮动元素周围。事实上，Chrome 做得对，而 Firefox 却没有。

有没有办法让它们保持一致？

查看http://jsfiddle.net/XPd9J/49/ 并更改结果的宽度以了解我的意思。

<div id="leftfloater"></div>
<div id="rightfloater"></div>
<table>
    <tr>
        <td class="centerbullet">
            <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-arrow-left-icon.png" />
        </td>
        <td>
            Watch behavior when changing result width. Fox != Chrome!
        </td>
    </tr>
</table>

（使用 Chrome 29.0.1547.66 m 和 FF 23.0.1）

【问题讨论】：

可能是因为缺少表的width 属性
更新：？我尝试制作一个垂直居中的背景项目符号，但背景不换行。您可以修改我的 fsfiddle 以使其在不使用表格的情况下工作还是我应该问一个新问题？
我觉得有点像jsfiddle.net/XPd9J/64
谢谢。它很接近，但内容不会环绕右浮动框的顶部。（我正在尝试一种技术，通过在它之前插入一个零宽度的左浮动图像来向下移动右浮动图像。这就是为什么我的示例在右浮动 div 中有“clear:both”。）在你的例子中，我尝试将内容的宽度调整为 100% 或固定的 500px，但都没有像我希望的那样工作！

标签： css html-table css-float

【解决方案1】：

哇，这很奇怪。但似乎添加 table{clear:left;} 会使 Firefox 在这种特定情况下的行为更像 Chrome。

【讨论】：

这使它环绕在右边浮动的盒子上，当然我也希望它环绕在左边的浮动盒子上！