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

我需要在本身已向下推的 float 元素周围显示文本。 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 中，文本会覆盖我的 float 元素。

我创建了一个 fiddle 来演示这个错误(显然，你需要 safari 才能看到它):

http://jsfiddle.net/8JLFp/

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

最佳答案

Please check the same issue on this site. May be this helps you.

可能的解决方案。