如何解決此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. 使用溢出：隱藏