Html Safari在文本旁边添加空格，Safari bug？

因此，我编写了一些半复杂的按钮，当你点击其中一个按钮时，一个加载符号会在一些文本的左侧移动

除了Mac上的Safari外，所有浏览器（ie8-10、FF、Mac和PC上的Chrome）中的按钮都看起来不错。它似乎无缘无故地在字母的右边增加了额外的空间

下面是它的屏幕截图：

以下是Safari中的before：

以下是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>

这里有一个活生生的例子：

---

知道safari为什么这么做吗？这里没有任何东西可以像这样把它推倒。

在safari开发工具的css中检查以下几行：

.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>

寄钱

到

寄钱

不要在任何地方都使用float:）

---

希望它能解决您的问题

不幸的是，我必须有一个div来封装动画gif，这样当javascript接管时，它可以屏蔽gif而不是调整gif的大小。不过，我会尝试移除那里的浮子

 <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>