Safari边框不会呈现一面

Question

我有以下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中呈现：

如何在Chrome中呈现：

任何可能导致此问题的想法？

Answer 1

在span中尝试使用-webkit前缀进行大小调整，因为在跨度宽度为100％时使用填充。