Thứ tự màu đường viền

Question

Tôi có một bảng có mọi đường viền được đặt thành độ rộng 1px. Tôi muốn đường viền trên cùng, bên trái và dưới cùng có màu đen và đường viền phải màu trắng. Vì vậy, tôi đã sử dụng mã này css

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

vấn đề này được đưa ra trong IE9, nơi góc trên bên phải điểm ảnh sẽ có màu trắng, nhưng góc dưới bên phải sẽ có màu đen.

tôi nghi ngờ vấn đề xuất phát hình thành cách IE9 tổ chức lại phong cách, bởi vì khi tôi nhìn vào css của bảng của tôi trong những công cụ developper console, nó được ra lệnh như thế này:

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; 

này hãy để tôi nghĩ có thể, thứ tự được sử dụng để xác định màu sắc làm cho đường viền trên có màu đen, sau đó viền phải có màu trắng (ghi đè góc trên cùng bên phải), sau đó viền dưới có màu đen (ghi đè góc dưới cùng bên phải) và finnaly đường viền trái có màu trái.

Vấn đề là, trên nền trắng, đường viền trên cùng và dưới cùng không có cùng chiều dài (bằng một pixel). Nó có thể không nhiều, nhưng tôi cần hai biên giới đó để phù hợp với các dòng khác trên trang của tôi.

Vì vậy, làm thế nào tôi có thể sửa lỗi này? Nó thực sự là về thứ tự các đường viền được tô màu, và nếu có, làm thế nào tôi có thể thay đổi nó?

Answer 1

Vì vậy, ở đây là, khá đơn giản trong thực tế

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

Bằng cách đưa ra biên giới đúng một phong cách ẩn, nó hoạt động hoàn hảo bây giờ. Vấn đề là một đường viền có kiểu ẩn sẽ đi trước trên bất kỳ kiểu nào khác cho các đường viền bị sập hoặc nằm ngang.

Answer 2

Thứ tự mà bạn xác định màu đường viền không liên quan. Trình duyệt chỉ hiển thị các đường viền theo nhiều cách khác nhau. Các điểm ảnh trong góc có được màu từ một trong hai bên, và nó phụ thuộc vào trình duyệt bạn đang sử dụng.

Có một số phương pháp khác nhau được sử dụng. Dưới đây là các trình duyệt phổ biến nhất, và làm thế nào họ vẽ các góc:

Internet Explorer:

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

Firefox:

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

Chrome:

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

Safari:

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

Opera:

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

Có vẻ như thể các nhà cung cấp trình duyệt khác nhau đi trên con đường của họ để sử dụng một phương pháp đó là khác biệt so với tất cả các trình duyệt khác .. .

(Đã thử nghiệm trong các phiên bản gần đây. Các phiên bản cũ hơn của bất kỳ trình duyệt nào có thể làm điều đó khác nhau, nhưng điều đó không thực sự quan trọng vì chúng khác nhau nhiều.)

Vì vậy, nếu bạn cần kiểm soát hoàn toàn cách các góc được vẽ, bạn sẽ sử dụng hai phần tử bên trong mỗi góc khác, đặt dọc biên giới trên một và biên giới horisontal trên khác.

Answer 3

Bạn có thể viết như thế này:

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