0

これは Firefox では問題ないようです。しかしSafariでは目立つ

角が丸く、境界線が挿入され、幅が指定された div があります。http://jsfiddle.net/jsoningram/fek5n/で見ることができます

div が左側の途中で途切れていることに気付くでしょう。実際には壊れていませんが、壊れているようです。.beveled クラスの境界線の色を黒に変更すると、表示されます。ボーダースタイルを削除することもでき、「ミッシングリンク」が返されます。

html:

<div id="sub_nav" class="rounded_10 beveled">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</p>

CSS:

#sub_nav {
    position: relative;
    background: #e6e6e6;
    width: 164px;
    min-height: 300px;
    float: left;
    padding: 0px 0px 27px 0px;
    z-index: 5;
    margin: 10px 0 0 10px;
}

#sub_nav li {
    position: relative;
    height: 50px;
    width: 160px;
    background: #ccc;
    margin: 0px 0px 1px 1px;
}

#sub_nav li:first-child {
    margin-top: 27px;
}

    .rounded_10 {
    -webkit-broder-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior:url(_/inc/PIE.htc);
}

    .beveled {
    border: 1px solid #fbfbfb;
    border-style: inset;
}

よろしくお願いします... </p>

4

3 に答える 3

1

これは、border-style:inset の仕組みと、境界線と背景色が互いに非常に近いという事実に関係しています。

Inset は 3 次元スタイルの効果ですが、1 ピクセルの境界線があるため、効果を描画する方法を理解するのが困難です。変えたら

.beveled {border: 30px solid red; border-style:inset;}

何を達成しようとしているのかがわかります。ベースカラーを取り、それを暗く/明るくして効果を出します。あなたのライトグレーは、その一部で白に明るくなっています。

したがって、border-style:inset を削除してから、境界線の色を変更すると、問題が解決するはずです。

.beveled {border: 1px solid #ccc;}
于 2012-06-16T15:06:03.670 に答える
0

わお。これは変です。#sub_navを180px幅にすると、修正されるようです。 http://jsfiddle.net/fek5n/11/

于 2012-06-16T15:25:33.650 に答える
0

少し実験したところ、このように各辺を設定して手動でインセット ボーダーを作成すると、同じ問題が発生することがわかりました。

.beveled {
    border-top: 2px solid #aaa;
    border-left: 2px solid #aaa;
    border-right: 2px solid #efefef;
}'

この問題を示すために、最小限の css を使用して jsFiddle を作成しました。 http://jsfiddle.net/MdE7q/

幅と高さの比率と関係があります。説明できませんが、私の例の幅を 400px に変更すると、ギャップがなくなります。実際、幅が高さよりも大きい場合、ギャップはまったく表示されず、高さが幅よりも大きい場合にのみ表示されます。

また、これは IE9+ では完璧に見えるため、webkit と Firefox でのレンダリングの問題であると思われます。

たぶん、modernizr がここで役立つでしょう。http://modernizr.com/

于 2012-06-16T15:10:43.403 に答える