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 cssOrdine colore bordo
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?
I browser disegnano una linea diagonale dall'angolo esterno all'angolo interno in cui si verifica lo spostamento del colore. Se la larghezza del bordo è impostata su 1px, il browser non può dividerlo in modo che IE scelga il pixel in alto a destra come bianco, FF - in basso a destra. Le specifiche CSS3 non dicono come il browser dovrebbe gestire i join. Rimuovendo il bordo destro la diagonale non viene renderizzata. Puoi vederlo meglio se imposti l'altezza: 0; e prova a creare alcuni triangoli CSS. – jasssonpet
'border-right-style: hidden' è in pratica' border-right-style: none' per non-tables. Vedi se 'border-right-color: transparent' produce qualcosa di diverso? – BoltClock
È possibile che in realtà non si desideri che il bordo destro sia completamente bianco, ma in realtà invisibile (come lo sfondo) o senza bordo? – Guffa