2

デモ

上のスクリーンショットでわかるように、Macbook Air の Safari バージョン 6.0.2 (8536.26.17) では、境界線の半径が右側に直線で表示されます。「ボタン」は、クラスが適用されたリンクタグです。この同じボタンは Chrome では正しく表示されますが、Safari では正しく表示されません。なぜこれが起こっているのか、私を夢中にさせています。

JSFiddle リンク: http://jsfiddle.net/unnmv/

私が使用しているCSSは次のとおりです。

background: $color;
border: 1px solid darken($color, 15%);
color: $text-color;
cursor: pointer;
display: inline-block;
font: 14px/100% Arial, Helvetica, sans-serif;
outline: none;
padding: 0.5em 2em;
text-align: center;
text-decoration: none;
width: auto;
height: auto;
border-radius:         3px;
-moz-border-radius:    3px;
-webkit-border-radius: 3px;
4

1 に答える 1

0

これが私にとってうまくいったことです：あなたのcssに以下を追加してください：

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

ブラウザー間の間隔の一貫性の問題について言及されていることに気付いたので、同じ問題を抱えていたので、この問題で試してみました。それは私のために働いた。

幸運を！

于 2013-03-16T02:43:43.997 に答える