我有以下 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 中的呈现方式:
有什么想法可能导致这种情况吗?