-1

これには単純な CSS コードを使用しています。

button {
border: 1px dotted #bebebe;
background: #eeeeee;
font-size: 20px;
color: black;
padding: 7px;
border-radius: 4px;
}

ただし、点線の境界線は左側に表示されません。

点線のボタン

私は何を間違っていますか？

編集：

さて、この問題を抱えているすべての人にとって、それはあなたが使用しているナビゲーターとズームについてです。理由はわかりませんが、すべての辺に境界線が見えるボタンと見えないボタンがあります。

4

2 に答える 2

4

ブラウザーには、1 ピクセル幅の点線ボーダーのレンダリングにバグがあります。たとえば、Mozilla バグ レポートDotted/dashed border-radiused corners are render as solidおよび Chromium バグ レポートAnother Border-Bug: dot line turn solid on the half way を参照してください。Chrome でそのようなバグの 1 つを引き起こしたようです。Win 7 の Chrome 28bet​​a で jdsfiddle をテストすると、左の境界線が実線で表示され、左半分に下の境界線が表示されます。（これは少し見にくいですが、例えばスクリーンショットを撮って拡大したり、境界線の色を赤に設定したりすると、より見やすくなります。）

許容できる回避策を見つけるのは難しいかもしれません。この特定のケースでは、角の丸みを削除するか (おそらくやりたくないでしょう)、境界線の幅を 2px に設定すると、バグが消えるようです。

于 2013-06-30T11:41:58.723 に答える