UL liアイテムは浮動しません：サファリで正しく、何が得られますか？

Question

私は3つのLIを持つULを作ろうとしています。クローム/ IE/FFでそれが正常に動作し、次のようになります。

が、Safariで

フロート：LIのは正しく動作しません、それはこのようになります右上：

(styles are here) 
#subnav_right{display:inline;list-style:none;} 
#subnav_right li{float:right;} 

<li style="float:right;list-style:none;margin:0px 5px 0 0"> 
<g:plusone count="false" size="medium"></g:plusone> 
</li> 

<li style="float:right;list-style:none;margin:0px 5px 0 0;overflow:hidden;width:50px;"> 
<div id="fb-root"></div><fb:like href="LIKEBUTTONURL" send="true" layout="button_count" width="50" show_faces="false" send="false" font="arial"></fb:like> 
</li> 

<li style="float:right;list-style:none;margin:0px 0 0 0"> 
    <form action="SEARCH BUTTON URL" id="cse-search-box"> 
     <label for="q"> 
     <input type="text" name="q" size="19" /> 
    </form> 
</li> 

ここには何がありますか？なぜこれは機能しませんか？ここでAppleは何をしていますか？

Answer 1

私はこれがあなたのブラウザのより多くの場合起こっていないことを驚いています。あなたのマークアップを見ると、liはこの順番で来ます1）プラス2）facebook 3）検索。あなたが右に浮動すると、要素はその順序で右に浮かぶので、plusoneは右に浮かぶ最初の項目であり、それぞれがフロー内で互いに積み重なります。

<li style="float:right;list-style:none;margin:0px 0 0 0"> 
    <form action="SEARCH BUTTON URL" id="cse-search-box"> 
     <label for="q"> 
     <input type="text" name="q" size="19" /> 
    </form> 
</li> 

<li style="float:right;list-style:none;margin:0px 5px 0 0;overflow:hidden;width:50px;"> 
    <div id="fb-root"></div><fb:like href="LIKEBUTTONURL" send="true" layout="button_count" width="50" show_faces="false" send="false" font="arial"></fb:like> 
</li> 

<li style="float:right;list-style:none;margin:0px 5px 0 0"> 
    <g:plusone count="false" size="medium"></g:plusone> 
</li>