0

好的,这是我遇到的一个问题,但尽我所能让它听起来不那么本地化,因为这实际上可能与 Safari 有关......

在我的网站http://s361608839.websitehome.co.uk/101d/html_new/index.html上,我们有一个样式为 ozo_button 的按钮,其内部跨度为 btn_arrow_right ,它在除 Safari 之外的所有浏览器中看起来都是正确的形式:

在此处输入图像描述

是什么导致 CSS 使按钮在 Safari 6.0 中看起来像这样(下图),其中箭头位于文本后面?

在此处输入图像描述

HTML:

<a class="ozo_button" href="https://console.101distribution.com?v=register" style="width:200px;cursor:pointer;"><span class="btn_arrow_right ozo_button_icon">icon</span><span class="ozo_button_label">Sign-Up &amp; Get Started</span></a>

CSS:

a.ozo_button {
font-family: Verdana;
font-weight: bold;
font-size:13px;
width:75px;
text-decoration:none;
display:block;
padding:5px 15px 5px 0px;
border:1px solid #999999;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
color:#333;
border:1px solid #DDD;
background:#FFFFFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEE));
background:-moz-linear-gradient(0% 90% 90deg, #EEE, #FFF);  
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

a.ozo_button span.ozo_button_icon {
vertical-align:middle;
margin-left: 0px;
float: left;
}
a.ozo_button span.ozo_button_label{
vertical-align:middle;
padding-left:25px;
}
.btn_arrow_right{
text-indent:-9999px;
position:absolute;
height: 35px;
width: 35px;
background:url(../images/arena_sprite.png) -263px -80px no-repeat transparent;
float: left;
}
4

1 回答 1

0

如果您正在使用,请尝试display:inline-block;display:block;根据要求也使用float:left;display:block;

于 2013-02-13T23:57:12.630 回答