html - 如何解决这个 Safari 浮动渲染错误

Question

我需要在本身已被向下推的浮动元素周围显示文本。HTML/CSS 非常简单：

<div id="container">
    <div id="shim"></div>
    <div id="myimg"></div> 
    <p>This is a test to demonstrate the float overwriting issue. The blue box represent an image that I don't wish the text to overwrite...</p>
</div>

CSS：

#container {
    width: 200px;
}

#shim {
    float:right;
    width: 1px;
    height: 40px;
    background-color: red;
}

#myimg {
    clear:both;
    float:right;
    width: 100px;
    height: 40px;
    background-color: blue;
}

它在 Chrome 和 Firefox 中完美运行，但是在 Safari 中，文本会覆盖我的浮动元素。

我创建了一个小提琴来演示这个错误（显然，你需要 safari 才能看到它）：

http://jsfiddle.net/8JLFp/

任何人都可以找到解决方案或建议另一种方法吗？

Answer 1

请在此站点上检查相同的问题。可能这对你有帮助。

可能的解决方案。

1. 尝试添加 clear:both div
2. 使用溢出：隐藏