Html 如何解决此Safari浮点渲染错误

我需要在一个浮动元素周围显示文本，该元素本身被向下推。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>

它在Chrome和Firefox中工作得很好，但是在Safari中，文本覆盖了我的浮动元素

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

有人能找到解决方案或提出其他方法吗？

可能的解决办法

尝试添加clear：两个div

使用溢出：隐藏

---

它在Safari 5.1.7Safari 6.0.2中看起来不错，但在chrome中无法正常工作。它正在使用Safari 6.0.2。它不适用于那个版本。4.5年了，这个错误仍然没有在Safari中修复！我今天遇到了这个问题，在Safari:div{overflow:hidden}中打开我的演示页面。。。将此添加到css中。您是否尝试过Janne在2008年9月11日所说的链接中的解决方案。只是在小提琴上尝试过。它具有将文本向下推的奇怪效果，但并不能解决问题。

#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;
}