2015-11-06 8 views
19

Webkit hanno aggiunto i propri margini specifiche che sono:Qual è la differenza di margin-top e -webkit-margin-prima

-webkit-margin-before: 
-webkit-margin-after: 
-webkit-margin-start: 
-webkit-margin-end: 

comprendo la differenza di (margine sinistro e -webkit-marginalmente start) o (margin-right e -webkit-margin-end) che è correlato alle lingue "left to right" o "right to left".

La mia domanda è qual è la differenza tra (margin-top e -webkit-margin-before) o (margin-bottom e -webkit-margin-after)?

Nota: è ovvio che il prefisso -webkit funziona solo sui browser del motore Webkit come chrome e safari. Questa domanda non è correlata ad essa.

+1

Sono stato in grado di trovare alcuna documentazione ufficiale per '-webkit-margin-before' e' -webkit-margin-AFTER'. Posso solo supporre che questi si riferiscono alle lingue "dall'alto al basso" e "dal basso verso l'alto". Non ero sicuro che esistessero anche linguaggi "dal basso verso l'alto", ma questo sito Web riporta alcuni esempi: http://www.omniglot.com/writing/direction.htm – MarkPlewis

+0

@MarkPlewis, È interessante! forse il margine -webkit-before funge da margine inferiore nelle lingue "dal basso verso l'alto". – Arashsoft

risposta

15

La risposta migliore che ho trovato finora è -web-margin-before atti stessa margin-top sui documenti normali, ma agirà come margin-bottom su "basso verso top "lingue (la stessa idea si applica a -webkit-margin-after).

È possibile trovare una serie di "basso verso l'alto" lingue in questo link omniglot.com/writing/direction.htm (grazie a @MarkPlewis)

+1

Una cosa utile da sapere è che sono il caso "generico" di margini. in [flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/), ad esempio, imposta correttamente il margine dell'elemento in base a 'flex-direction', mentre' margin- 'non fa nulla – Kilves

-1

Mentre Chrome e WebKit supportano tutte le proprietà e le parole chiave da -webkit-, Safari supporta solo l'avvio (Mozilla fa un po 'meglio in quanto supporta sia l'inizio che la fine). Tuttavia, tutte queste proprietà funzionano in Safari 6; così, quando le navi, avremo bisogno di sostituire i valori superiore, destro e inferiore con le proprietà prefissate per rendere la nostra "direzione" styling agnostica.

Fondamentalmente -webkit- può essere utilizzato per il targeting di browser diversi come Safari, Chrome e Firefox. L'articolo di dettaglio è disponibile here.

Questo articolo discute la creazione di un foglio di stili di base per i browser basati su WebKit.

per evitare di non applicare i valori -webkit- io uso:

*, *:before, *:after { 
    box-sizing: inherit; 
} 
Problemi correlati