La mia pagina ha questo riempimento extra nella parte superiore della pagina che non riesco a rimuovere. Ho provato tutto sotto il sole e spero che qualcuno possa indicarmi la strada.Extra padding su Chrome/Safari/Webkit - qualche idea?
Qualche idea?
La pagina ha un elemento vicino alla parte superiore con un margine superiore che si estende all'esterno del wrapper della pagina. Se avete questo:
<div class="wrapper" style="margin: 0">
<div class="section" style="margin: 40px 0"> Stuff! </div>
</div>
Poi l'elemento .section sarà posizionato nella parte superiore della .wrapper e che il margine 40px estenderà fuori alto. Questo ha a che fare con il modo in cui i margini collassano insieme in modo che non si accumulino due margini tra gli elementi. È possibile evitare ciò aggiungendo overflow: hidden sul wrapper.
Nel tuo markup, è l'elemento .mini-search con un margine superiore di 40 px. Rimuovere questo margine o aggiungere overflow: hidden sul fieldset che lo contiene.
HOORAY - e lo hai inchiodato! tolto quel dannato margine da .mini-search e riposizionato via padding ora sono a posto. molte grazie!!! – pepe
HOORAY - e lo hai inchiodato! ora sono a posto. molte grazie!!! –
sono in grado di risolvere il problema rimuovendo la regola:
* { padding: 0 }
Dal tuo CSS. Non sono sicuro di cosa si stia rompendo, ma questa è la causa.
Posso confermare che funziona, ma non ho idea del perché. Utilizzando il visualizzatore DOM integrato di Chrome, puoi vedere che l'intero tag
sembra essere spostato verso il basso, non solo l'intestazione. Molto strano. –Quindi quello che mi piacerebbe raccomandare qui è semplicemente usare il reset CSS di Eric Meyer: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ invece di "* {margin: 0; padding: 0 }". HTH –
thx eric - ho notato anche questo, ma non sono riuscito a risolverlo via css - ma andrew ha trovato la riga incriminata e ora sono bravo - grazie per il commento – pepe
ho fiducia che avete fatto:
body {padding :0; margin:0}
per default il tag body ha imbottitura.
aggiungendo questa riga al mio css non ha fatto alcuna differenza - thx per il commento walter – pepe
Questo è quello che mi serviva, grazie :) – Laser
belle informazioni risolto il mio problema grazie – BigPenguin
Usa questo codice css:
/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}
Il problema si commento è perché lo stile user agent, imparo su di esso ispezionare il tag body con lo strumento del browser. Dovresti rintracciare gli stili degli elementi su un navigatore usando gli strumenti che fornisce (ora tutti gli importanti includono un ispettore DOM) in modo da poter demistificare il comportamento non standard.
So che non lo chiedi ma parliamo di materiale WebKit, ho incollato un codice per ottenere i bordi arrotondati su ogni browser ma IE.
.rounded
{
-moz-border-radius:5px; /*works on Firefox */
-webkit-border-radius:5px; /*works on Safari and Google Chrome*/
border-bottom-radius: 5px; /*works on Opera*/
}
thx horacio - sfortunatamente questo non funzionava – pepe
Includere sempre il file css di ripristino YUI.
e: body, html {padding: 0; margin:0} questo è tutto!
omar, anche questo non funzionava lavoro - aggiunta la linea che hai raccomandato ma nessuna modifica - grazie però – pepe
Il foglio di stili WebKit contiene quanto segue: 'margin' e 'padding':
-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:
-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:
Godetevi
Non funziona nel mio caso. – starikovs
È, a mio parere, causata da un elemento EMBED aggiunto da qualche plugin subito dopo il tag di apertura HTML * (controlla "fai clic destro> controlla elemento" per vedere se è davvero lì).Se sì, ci sono fondamentalmente due opzioni da seguire:
embed{display:none} nel tuo foglio di stile.* Questo era il mio caso - il plugin chiamato predefinita plug ed entrambi disabilitando & rimozione ha contribuito a risolvere il problema.
Commento non costruttivo: tu ** sicuramente ** fai ** amore ** usando ** grassetto **. =) – Jesse
Um, volevo solo indicare le informazioni più importanti in modo che coloro che non hanno voglia di leggere tutto potrebbero ottenere il punto. :)) – Kaja
Va bene, alla fine imparerai (almeno sono arrivato a questa conclusione) che stai postando per aiutare gli altri, non per attirare l'attenzione sulla tua risposta. Coloro che hanno bisogno di aiuto * leggeranno * tutto il tuo post. D'altra parte, se stai postando una domanda, potrebbe essere utile evidenziare le ** parti più importanti **. – Jesse
Questo funziona con IE (almeno IE v10 nei miei test):
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
quello inferiore è quello che funziona per IE 10, solo mantiene tutte le dimensioni a quello che si imposta un selettore/elemento essere nella larghezza e/o altezza.
Ho avuto lo stesso problema con il mio nav che ha un padding e contiene pulsanti. Overflow:hidden ha funzionato, ma ha anche tagliato i pulsanti, perché avevano una imbottitura che attraversava il bordo dell'altezza delle navi. Così ho provato overflow:visible e questo ha funzionato bene per me.
usa sempre css reset per minimizzare le differenze sul browser – takien
Vedo un po 'di padding extra non in alto ma sui lati, sia in Chrome che in Safari, anche se è un po' più pronunciato in Chrome. La domanda –
è inutile senza codice di esempio, utilizzata per contenere un collegamento ma questo viene rimosso! –