11

Mac OS X用のSafariで、境界線の半径に関していくつかの非常に奇妙な問題が発生しています。このjsFiddleを見てください：http：//jsfiddle.net/sXxtU/1/

Safari Mac OS X :(
ここに画像の説明を入力してください
左上隅と白い縦線）

Chrome Mac OS X :(
ここに画像の説明を入力してください
完全に問題ありません）

Safari iOS 6.0
ここに画像の説明を入力してください
（これも完全に問題ありません）。

さて、この例では、を使用してborder-radius: 5px 5px 0 0;います。つまり、上部の隅にのみ適用しています。ただし、すべての角を丸めることを選択した場合–これを取得します（Safari for OS Xで）：

ここに画像の説明を入力してください

これは既知のバグですか？これを改善する方法はありますか？クリッピングの問題が原因だと思いますが、どのように異なる修正を適用しようとしても、正しく表示されません。

編集
これはSafari6.0.2にあることを指摘する必要があります。まだ他のバージョンをテストする機会がありません。

編集2
追加border: 1px solid transparent;してみましたが、見た目はずっと良くなりました。ただし、境界線の色（#fffなど）を使用すると、クリッピングの問題が発生します（右上隅にあります...？）。ここで何が起こっているのかを学ぶことにまだ非常に興味があります。

編集3
ユーザーSparkyは、私のHTMLが無効である（ul要素内にdiv要素がある）と指摘しましたが、これは私が抱えている問題とは何の関係もないことを確認しました。

編集
4Safari6.0.2のいくつかの古いバージョンのOSXをテストしており、この問題は10.8.2でのみ発生するようです。非常に奇妙な。

4

7 に答える 7

1

これは事実であり、コードの記述方法とは何の関係もありません。これはブラウザのバグです。

このバグのあるページを拡大すると、一部のズーム レベルでレンダリングが正しく表示されることがわかります。

これを修正する方法はまだ見つかりませんでした。

于 2013-02-02T16:57:47.177 に答える
1

これは、順序付けされていないリスト内に div clear を挿入しているためです。リスト項目は display: inline-block として設定する必要があり、リスト項目が左に浮いている場合でも、適切な高さを維持するために ul に clearfix を付けることができます。

これを6.0でテストし、次に6.0.2でテストしました

これは、いくつかの調整を加えた jsfiddle のフォークです。

http://jsfiddle.net/rossedman425/VTySS/1/

HTML:

<div class="container">
<div class="pill">
    <ul class="cf">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
    </ul>
</div>

CSS:

.container {
    padding: 20px;
}
.pill {
    background-color: #00a38f;
    border-radius: 5px 5px 0 0;
}
ul {
    padding: 13px;
    list-style: none;
}
li {
    float:left;
    margin-right: 20px;
    display: inline-block;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
于 2012-12-22T06:20:47.640 に答える
1

おそらく、そのバージョンの OS X は、ULある種のバックグラウンド プロパティを使用して をレンダリングしています。暗闇でのショットにすぎませんが、試しbackground: transparent;てみてくださいUL。または、同じ目的に役立つ場合は、背景色と境界線の半径を に移動してみてくださいUL。

于 2013-01-07T03:11:39.787 に答える
0

FF20でも同様の問題がありましたが、ページを誤って拡大したのは私だけのようでした. ズームを 0 にリセットすると、線が削除されました。

于 2013-04-20T17:10:01.197 に答える
-4

境界線の半径を調整するには、次のことを試してください。

border-top-right-radius:10px;
-webkit-top-right-border-radius:10px;
border-top-left-radius:10px;
-webkit-top-left-border-radius:10px;
于 2012-12-21T17:14:15.437 に答える