0

以前に見つけた (そして解決した) ような問題に遭遇しました。しかし、何をどのように思い出せません。

私はjQuery Mobileを使用しており、主にスキンを変更しています。これの一部は、ナビゲーション アイテムの下部に実線の太い線を配置することです。だから私は境界線をオーバーライドしたので、左右に 1px の境界線があり、次に 10px の下の境界線があります。しかし、下の境界はギザギザです。左と右が下の境界の半分を超えようとしているように見えますが、すべてではありません。

問題のスクリーンショットを添付しました (より明確にするために、下の境界線を 25px に増やしました)。

 #id
   {
     border: #231F20 1px solid;
     border-top: none;
     border-bottom: #EE1E5C 25px solid;
   }

この問題が発生している場所と解決方法についてのアイデアはありますか?

スクリーンショット

4

1 に答える 1

1

これは、境界線の端が水平または垂直の直線ではなく、内側のボックスの角から始まり、境界線を含むボックスの角で終わる対角線で交わるためです (この場合、境界線が 1 ピクセルで終了することを意味します)。開始位置の左右）。横の境界線をより広く変更すると、何が起こっているのかがより明確になります。

説明する簡単な画像を次に示します。

境界結合

境界は赤い線に沿って結合します。

解決策として、その下の境界線を提供するためにラップする追加の要素が必要になる場合や、1px の横の境界線を取り除く必要がある場合があります。どちらも理想的な解決策ではありません。

于 2012-07-13T11:41:57.393 に答える