2

4つの異なる色の境界線を持つメニューを作成しています。Safari 5で表示すると、左右の境界線は上から下に移動し、ボックスの周囲に角度はありません。FF 4で表示すると、border-bottom要素とborder-right要素に境界線の角度があります。これにより、ブラウザによってメニューの外観が異なります。メニュー項目のCSSは次のとおりです。

ul#mainnav a {
   display: block;
   text-decoration: none;
   color: #b0c9da;
   padding: 7px 7px 7px 14px;
   border-bottom: 1px solid #01304f;
   border-top: 1px solid #1a74af;
   border-right: 1px solid #fff;
   border-left: 1px solid #246792; }

お知らせ下さい。ありがとう

4

1 に答える 1

4

これは、ブラウザーが境界線の開始位置と終了位置を決定するために発生します。残念ながら、これに対する修正はありません。あなたの最善の策は、それほど目立たないように十分に類似した境界線の色を選択することです.

最新のブラウザー/CSS3 サポートを必要とする別のオプションは、要素に box-shadow を使用することです。例えば：

box-shadow: inset 1px 1px 1px rgba(255,0,0,1), 
            inset 1px -1px 1px rgba(0,255,0,1);

幅 1 ピクセルのボックス シャドウを複数レイヤー追加し、それらが「ドロップ」する方向を指定できます。楽しく遊べます。

于 2011-03-30T20:38:02.390 に答える