如何解决此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中的文本覆盖我的浮动元素。

我创建了一个小提琴证明了这个错误（显然，你需要野生动物园看到它）：

http://jsfiddle.net/8JLFp/

任何人都可以找到一个解决方案或建议这样做的另一种方式？

Answer 1

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

可能的解决方案。

1. 尝试增加明确：双方的div
2. 使用溢出：隐藏