Ordine colore bordo

Question

Ho una tabella con ogni bordo impostato su 1px larghezza solido. Desidero che il bordo superiore, sinistro e inferiore siano neri e che il bordo destro sia bianco. Così, ho usato questo codice css

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

Il problema si presenta in IE9, dove la parte superiore del pixel a destra sarà bianco, ma l'angolo in basso a destra sarà nero.

Ho il sospetto che il problema viene dal modo in cui IE9 riorganizzare lo stile, perché quando guardo il css del mio tavolo nella console strumenti sviluppatore, è ordinato in questo modo:

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; 

Questo mi fa pensare che, forse, l'ordine usato per definire i colori fa sì che il bordo superiore sia colorato in nero, quindi il bordo destro sia colorato in bianco (sovrascrivendo l'angolo in alto a destra), quindi il bordo inferiore è colorato in nero (sovrascrivendo l'angolo in basso a destra) e Finalmente il bordo sinistro è colorato a sinistra.

Il fatto è che, su uno sfondo bianco, i bordi superiore e inferiore non sembrano avere la stessa lunghezza (di un pixel). Potrebbe non essere molto, ma ho bisogno di quei due bordi per adattarli ad altre linee sulla mia pagina.

Quindi, come posso risolvere questo problema? Riguarda davvero l'ordine in cui i bordi sono colorati, e se lo è, come posso cambiarlo?

Answer 1

Così, qui è, piuttosto semplice in realtà

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

Dando il bordo destro uno stile nascosta, funziona perfettamente ora. Il fatto è che un bordo con lo stile nascosto precederà su qualsiasi altro stile per i bordi compressi o sovrapposti.

Answer 2

L'ordine in cui si effettuano i colori del bordo è irrilevante. I browser mostrano semplicemente i bordi in modi diversi. I pixel nell'angolo prendono il colore da uno dei lati e dipende da quale browser stai usando.

Esistono diversi metodi. Qui ci sono i browser più comuni, e come disegnare gli angoli:

Internet Explorer:

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

Firefox:

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

Chrome:

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

012.

Safari:

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

Opera:

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

Sembra quasi come se diversi produttori di browser è andato fuori del loro modo di utilizzare un metodo che è diverso da tutti gli altri browser ..

(Testato nelle versioni recenti. Le versioni precedenti di qualsiasi browser potrebbero eventualmente farlo in modo diverso, ma non è molto importante in quanto differiscono così tanto.)

Quindi, se hai bisogno del pieno controllo su come vengono disegnati gli angoli, puoi usare due elementi all'interno di ciascuno altro, metti i bordi verticali su uno e i bordi orizzontali sull'altro.

Answer 3

È possibile scrivere in questo modo:

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