0

因此，我正在编写一些半复杂的按钮，当您单击一个按钮时，加载符号会移入某些文本的左侧。

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

这是它应该是什么样子的屏幕截图：

在此处输入图像描述

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

任何想法为什么野生动物园这样做？这里没有任何东西可以像那样推倒它。

4

1 回答 1

1

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

至

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

并且不要在任何地方都使用浮点数:)

希望它能解决你的问题

于 2013-08-27T20:17:53.760 回答