Safari在文本旁添加空間，Safari bug？

Question

所以我編碼了一些半複雜的按鈕，當你點擊一個按鈕時，一個加載符號在一些文本的左邊移動。

按鈕在所有瀏覽器（例如8-10，FF，Mac上的Chrome & PC）中都很好，但Mac上的Safari除外。它似乎無故添加額外的空間在刻字的權利。

下面是它應該是什麼樣子的屏幕截圖：

這裏是什麼看起來像以前一樣在Safari：

這裏的HTML：

 <div class="move1"> 
      <div class="final-button small"> 
       <div class="final-spinner"> 
        <img src="images/Loader_24g.gif" /> 
       </div> 
       <div class="final-title"> 
        send money 
       </div> 
      </div> 
     </div> 
     <div class="move2"> 
      <div class="final-button large"> 
       <div class="final-spinner"> 
        <img src="images/Loader_32g.gif" /> 
       </div> 
       <div class="final-title"> 
        send money 
       </div> 
      </div> 
     </div> 

和在CSS：

.final-button { 
    font-family: 'proxima-nova', Helvetica, Arial, Verdana, Sans-Serif; 
    color: #ffffff; 
    text-transform:uppercase; 
    background:#97c231; 
    float:right; 
    border-radius:2px; 
    cursor:pointer; 
} 
.final-button:hover { 
    background:#a6d536; 
} 
.final-button .final-spinner { 
    float:left; 
    overflow: hidden; 
    width: 0px; 
} 
.final-button .final-title { 
    float:left; 
} 

.final-button.small { 
    font-size: 18px; 
    padding:8px 28px; 
} 
.final-button.small .final-spinner { 
} 
.final-button.small .final-title { 
    padding: 3px 0 0 0; 
} 
.final-button.large { 
    font-size: 24px; 
    padding:12px 23px; 
} 
.final-button.large .final-spinner { 
} 
.final-button.large .final-title { 
    padding: 2px 0 0 0; 
} 
.move1, .move2 { 
    margin:50px 0 0 0; 
    clear:both; 
    overflow:hidden; 
} 

和活生生的例子在這裏： http://412webdesigns.com/playground/tempGo/button.html

任何想法，爲什麼Safari是這樣做呢？這裏沒有什麼應該像這樣推動它。

Answer 1

檢查此線在你的CSS在Safari開發工具：

.final-button .final-title { 
    float: left; //remove it 
} 

我認爲這是浮動的問題，因此將其刪除或更改@ inline-block的或@inline。

嘗試改變HTML：

<div class="final-spinner"> 
     <img src="images/Loader_32g.gif" /> 
</div> 
<div class="final-title"> 
    send money 
</div> 

要

<img class="final-spinner" src="images/Loader_32g.gif" /> 
    <span class="final-title"> 
    send money 
    </span> 

，不使用浮動每一個地方:)

希望它可以解決您的問題