7

幅が 965 ピクセルを超え、境界線の半径が 4 つの隅すべてに満たない div がある場合、div に縦線が迷子になることに気付きました。ここにjsFiddleリンクがあります... http://jsfiddle.net/Z3vFp/4/。これは Safari でのみ発生することに注意してください。何かご意見は？また、jsFiddle では 965 ピクセルのしきい値が少し異なる場合があることに注意してください。

編集: Retina ディスプレイを搭載した Macbook Pro を使用しています。それはrMBPのことだと思いますか？

編集 2: これは jsFiddle のスクリーン キャップです。http://i.imgur.com/0rqSS.png

4

3 に答える 3

10

追加-webkit-background-clip: padding-box;

.foo {
    width: 966px;
    height: 50px;
    background-color: lightgray;
    padding: 25px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    -webkit-background-clip: padding-box;
}​
于 2012-08-30T20:11:58.433 に答える
0

Safari バージョン 6.0 (8536.25) を搭載した 13 インチ Mac Book Pro (OSX 10.8) でこの問題を確認しました。したがって、Retina ディスプレイとは関係ありません。ボーダー半径を 1 つ、2 つ、または 3 つのコーナーにのみ適用すると発生します。解決策は、四隅すべてに境界半径を適用することです。

次のコードは、縦の縦線を表示します。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:red}
#myBox {
  width: 960px;
  height: 300px;
  background-color: white;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  margin: auto;
}
</style>
</head>
<body>
<div id="myBox">
</div>
</body>
</html>
于 2012-08-22T13:22:09.423 に答える
-1

四隅すべてが例えば5pxに設定されていても、私はそれを取得します

問題は、Apple Safari にバグがあるため、border-radius を使用しないか、または Apple が解決するのを待つかです。

私はアップルがそれを整理するのを待っていると思います-私たち農民がPCに苦しむ必要がある間、金持ちに正しくサービスを提供します

~(それは第3次世界大戦が勃発する前の冗談です)

于 2013-02-13T14:41:58.337 に答える