css - CSS の border-left と border-right の高さが等しい

Question

border-left を border-right と同じ高さにするにはどうすればよいですか? つまり、境界線の順序を変更する方法は? Border-left は、border-right よりも高くなっています。その結果、1px の「ギャップ」が生じます。

.tab-header > ul > li
{
display: inline-block;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
border-top: 1px solid #cecece;
padding: 8px;
font-size: 10px;
text-transform: uppercase;
}

Answer 1

何が起こっているかというと、css が境界線の対角線の色を素敵に変更しようとしていることです。すべてを に変更する1pxと10px、問題が発生します。(画像、参照: http://jsfiddle.net/DaTCy/1/ )

1px 幅の境界線を使用している場合、下と右の境界線は常に右下のピクセルで重なります。

---

編集: 解決策として、下の境界線の幅を 0px にして、ボタンを配置したコンテナーの高さの問題を解決することができます。

Answer 2

最も簡単な解決策は、明示的に使用することです。

border-bottom-width: 0;

JS フィドルのデモ。

Answer 3

border-left/-top/-rightとborder-bottomを異なる[ネストされた] 要素に使用します。