12

すべての境界線が1px幅のソリッドに設定されたテーブルがあります。上、左、下の境界線を黒にし、右の境界線を白にします。だから、私はこのcssコードを使用しました

border-right-color: white;    
border-left-color: black; 
border-top-color: black; 
border-bottom-color: black; 
border: solid 1px;

問題はIE9で発生します。この場合、右上隅のピクセルは白になりますが、右下隅は黒になります。

IE9がスタイルを再編成する方法に問題があるのではないかと思います。これは、開発者ツールコンソールでテーブルのcssを見ると、次のように順序付けられているためです。

border-top-color: black;
border-right-color: white; 
border-bottom-color: black;  
border-left-color: black; 
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

これにより、おそらく、定義された色の順序によって、上部の境界線が黒になり、次に右側の境界線が白になり（右上隅を上書き）、下部の境界線が黒になります（下部を上書きする）と思います。右隅）そして最後に左の境界線は左に色付けされています。

問題は、白い背景では、上下の境界線が同じ長さ（1ピクセル）に見えないことです。それほど多くはないかもしれませんが、ページの他の行に合わせるために、これらの2つの境界線が必要です。

だから、どうすればこれを修正できますか？それは本当に境界線が着色されている順序についてですか、もしそうなら、どうすればそれを変更できますか？

4

3 に答える 3

20

境界線の色を認識する順序は関係ありません。ブラウザは、さまざまな方法で境界線を表示するだけです。隅のピクセルはどちらの側からも色を取得します。これは、使用しているブラウザによって異なります。

使用されるいくつかの異なる方法があります。最も一般的なブラウザと、それらがどのようにコーナーを描くかを次に示します。

インターネットエクスプローラ：

+----------------------+--+
|                      |  |
+----------------------|  |
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +----------------------+
|  |                      |
+--+----------------------+

Firefox：

+--+----------------------+
|  |                      |
|  +----------------------+
|  |                   |  |
|  |                   |  |
|  |                   |  |
+----------------------|  |
|                      |  |
+----------------------+--+

クロム：

+--+----------------------+
|  |                      |
|  |----------------------+
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +----------------------+
|  |                      |
+--+----------------------+

サファリ：

+--+-------------------+--+
|  |                   |  |
|  |-------------------|  |
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +-------------------+  |
|  |                   |  |
+--+-------------------+--+

オペラ：

+-------------------------+
|                         |
+-------------------------+
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +-------------------+  |
|  |                   |  |
+--+-------------------+--+

まるで、他のすべてのブラウザとは異なる方法を使用するために、さまざまなブラウザベンダーが邪魔をしているように見えます...

（最近のバージョンでテストされています。古いバージョンのブラウザーでは、動作が異なる可能性がありますが、とにかく大きく異なるため、それほど重要ではありません。）

したがって、コーナーの描画方法を完全に制御する必要がある場合は、2つの要素を相互に使用し、一方に垂直方向の境界線を配置し、もう一方に水平方向の境界線を配置します。

于 2012-06-04T15:41:55.003 に答える
4

だから、これは、実際にはかなり単純です

border: solid 1px black;
border-right-style: hidden;

右の境界線に隠されたスタイルを与えることで、今では完璧に機能します。重要なのは、スタイルが非表示になっている境界線が、折りたたまれた境界線または重なっている境界線の他のスタイルよりも優先されるということです。

于 2012-06-04T16:02:54.713 に答える
1

あなたはこのように書くことができます：

div{
 border:1px solid black;
 border-right-color:white;
}
于 2012-06-04T15:53:12.260 に答える