0

我有以下 CSS / HTML 代码:

CSS:

#buttons a {
 margin: 0 30px;
 display: inline-block;
 position: relative;
 padding: 9px 3px;
 -webkit-transition: background 500ms ease-in-out;
 -moz-transition: background 500ms ease-in-out;
 -ms-transition: background 500ms ease-in-out;
 -o-transition: background 500ms ease-in-out;
 transition: background 500ms ease-in-out;
}
#buttons a span{
 background: #242424;
 font-size: 1.7em;
 color: #fffae6;
 border: 1px solid #fff;
 outline: 4px solid #242424;
 position: relative;
 width: 100%;
 height: 100%;
 padding: 5px 40px;
 -webkit-transition: background 500ms ease-in-out;
 -moz-transition: background 500ms ease-in-out;
 -ms-transition: background 500ms ease-in-out;
 -o-transition: background 500ms ease-in-out;
 transition: background 500ms ease-in-out;
}

HTML:

<a class="restaurant_book_button" href="/book"><span>Book Online</span></a>

它在 Safari 中的呈现方式: Safari 预览

它在 Chrome 中的呈现方式: 铬预览

有什么想法可能导致这种情况吗?

4

1 回答 1

0

尝试在 span 中使用 -webkit 前缀进行 box-sizing,因为您在 span 宽度为 100% 时使用了填充。

于 2014-05-09T09:21:07.240 回答