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

スパン幅が 100% のときにパディングを使用しているため、スパンに -webkit プレフィックスを付けてボックスのサイズ変更を試してください。