Obramowanie kolorów obramowania

Question

Mam tabelę z każdą krawędzią ustawioną na szerokość 1px. Chcę, aby górna, lewa i dolna krawędź była czarna, a prawa krawędź biała. Więc użyłem tego kodu css

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

Problem zaczyna się w IE9, gdzie w prawym górnym rogu pikseli będą białe, ale dolny prawy róg będzie czarny.

Podejrzewam, że problem jest utworzyć drogę IE9 reorganizacji styl, bo kiedy patrzę na css moim stole w konsoli narzędzi developper, zarządza się tak:

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; 

To niech pomyślę że, być może, kolejność użyta do zdefiniowania kolorów sprawia, że ​​górna ramka jest w kolorze czarnym, a prawa krawędź jest w kolorze białym (nadpisywanie prawego górnego rogu), następnie dolna ramka ma kolor czarny (nadpisywanie prawego dolnego rogu) i finałowa lewa granica jest w kolorze lewym.

Chodzi o to, że na białym tle górna i dolna krawędź nie wydają się być tej samej długości (o jeden piksel). To może nie być dużo, ale potrzebuję tych dwóch granic, aby pasowały do ​​innych linii na mojej stronie.

Jak mogę to naprawić? Czy naprawdę chodzi o porządek, w którym granice są kolorowe, a jeśli tak, to jak mogę to zmienić?

Answer 1

Więc to jest tutaj, bardzo prosty w rzeczywistości

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

Dając prawej granicy styl ukryty, to działa doskonale teraz. Rzecz w tym, że granica z ukrytym stylem poprzedza inny styl zawalonych lub leżących na granicy.

Answer 2

Kolejność, w jakiej można rozrysować kolory obramowania, jest nieistotna. Przeglądarki po prostu wyświetlają granice na różne sposoby. Piksele w rogu otrzymują kolor z obu stron i zależy to od używanej przeglądarki.

Stosuje się kilka różnych metod. Oto najczęstsze przeglądarek i jak wyciągnąć zakrętów:

Internet Explorer:

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

Firefox:

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

Chrome:

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

Safari:

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

Opera:

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

Wygląda jakby różnych producentów przeglądarek wychodzili z siebie, aby wykorzystać metodę, która różni się od wszystkich innych przeglądarkach ..

(Testowane w najnowszych wersjach. Starsze wersje dowolnej przeglądarki mogą robić to inaczej, ale to nie jest tak ważne, ponieważ tak bardzo się różnią.)

Tak więc, jeśli potrzebujesz pełnej kontroli nad sposobem rysowania narożników, możesz użyć dwóch elementów w każdym z nich inne, umieść pionowe granice na jednej i poziomej granicy z drugiej.

Answer 3

można napisać tak:

div{ 
border:1px solid black; 
border-right-color:white; 
}