Imbottitura Extra Chrome/Safari/Webkit — tutte le idee?

La mia pagina è questa imbottitura extra nella parte superiore della pagina che non riesco a rimuovere. Provato di tutto sotto il sole e spero che qualcuno può mostrarmi la via.

Tutte le idee?

  • Vedo un po ‘di imbottitura extra non il top, ma sui lati, sia Chrome e Safari, anche se è un po’ più pronunciato in Chrome.
  • sempre usare i css reset per ridurre le differenze attraverso il browser
  • la domanda è inutile senza il codice di esempio, utilizzato per contenere un link, ma questo è stato rimosso!
InformationsquelleAutor pepe | 2010-09-25

 

9 Replies
  1. 8

    Tua pagina è un elemento vicino alla parte superiore con un margine che si estende al di fuori della tua pagina wrapper. Se si dispone di questo:

    <div class="wrapper" style="margin: 0">
      <div class="section" style="margin: 40px 0"> Stuff! </div>
    </div>

    Quindi il .section elemento sarà posizionato in alto a .wrapper e la sua 40px margine di estendere il top. Questo ha a che fare con il modo in cui margini si fondono in modo che due margini tra gli elementi non si accumulano. È possibile evitare questo con l’aggiunta di overflow: hidden sull’involucro.

    Nel markup, è il .mini-search elemento che ha un 40px margine superiore. Rimuovi questo margine, o aggiungere overflow: hidden sul fieldset che lo contiene.

    • EVVIVA, andrea si è inchiodato! tolto quel maledetto margine .mini-ricerca e riposizionato via imbottitura ora sono buone per andare. grazie mille!!!
    • EVVIVA, andrea si è inchiodato! ora sto per andare. grazie mille!!!
  2. 11

    WebKit stili foglio contiene le seguenti:
    ‘margine’ e ‘padding’ proprietà:

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

    Godere

    • Non funziona nel mio caso.
  3. 4

    Utilizzare questo codice css:

    /*Reset Safari User Agent Styles*/
    * { -webkit-padding-start: 0px;}

    Il problema è il commento è perché l’agente utente di stile, imparare su di esso, ispezionando il tag body con strumenti del browser. Si dovrebbe rintracciare l’elemento stili di navigatore utilizzando gli strumenti che offre (ora tutti i piu ‘ importanti includono un DOM inspector) in modo da poter sfatare il non-standard di comportamento.

    So che tu non chiedi ma parlando di WebKit animali, ho incollare un codice per ottenere
    bordi arrotondati su tutti i 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 – purtroppo questo non funziona
  4. 3

    ho fiducia che avete fatto:

    body {padding :0; margin:0}

    per impostazione predefinita, il tag body ha un’imbottitura.

    • aggiungendo questa riga al mio css non faceva la differenza – thx per il commento di walter
    • Che è quello che mi serviva, grazie 🙂
    • bella info risolto il mio problema grazie
  5. 1

    È, a mio parere, causato da INCORPORARE un elemento aggiunto da alcuni plugin appena dopo il HTML tag di apertura* (check”, fare clic destro > inspect element” per vedere se c’è davvero). Se sì, ci sono fondamentalmente due opzioni per seguire:

    1. disabilitare/rimuovere il plugin che è responsabile per l’aggiunta di un elemento; (preferito, come è globale)
    2. inserire embed{display:none} nel tuo foglio di stile.

    *Questo è stato il mio caso – il plugin chiamato di default il plugin e sia la disattivazione & rimozione contribuito a risolvere il problema.

    • Inutile commento: si sicuro in amore con grassetto. =)
    • Ehm, volevo solo sottolineare le informazioni più importanti, in modo che coloro che non hanno voglia di leggere tutto potrebbe ottenere il punto. :))
    • Questo va bene, potrai finalmente imparare (almeno sono arrivato a questa conclusione) che pubblichi per aiutare gli altri, non per attirare l’attenzione alla vostra risposta. Coloro che hanno bisogno di aiuto leggere il tuo post intero. D’altra parte, se pubblichi una domanda, può essere di aiuto per evidenziare il parti più importanti.
  6. 0

    Io sono in grado di risolvere il problema rimuovendo la regola:

    * { padding: 0 } 

    Dal tuo CSS. Io non sono sicuro di quello che di rottura, ma che è la causa.

    • Posso confermare che funziona, ma ho anche non hanno idea del perché. Utilizzando Chrome built-in DOM visualizzatore, è possibile vedere che l’intero <body> tag sembra essere spostata verso il basso, non solo l’intestazione. Molto strano.
    • Quindi cosa mi consiglia di qui è solo utilizzo di Eric Meyer CSS Reset: meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded al posto di “* {margin:0; padding:0}”. HTH
    • thx eric – ho notato anche io, ma non riuscivo a fissaggio tramite css — ma andrew trovato la riga incriminata e ora sto bene — thx per il commento
  7. 0

    Di includere sempre YUI reset css file.

    e:
    body, html {padding: 0; margin:0} che è!

    • omar, anche questo non ha funzionato — aggiunta la riga si consiglia, ma nessun cambiamento – thx anche se
  8. 0

    Questo funziona con IE (almeno IE v10 nel mio test):

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    Fondo è quello che funziona per IE 10, mantiene tutte le dimensioni a quello che si imposta un selettore/elemento per essere in larghezza e/o altezza.

  9. 0

    Ho avuto lo stesso problema con il mio nav ha un imbottitura e contiene i pulsanti. Overflow:hidden ha fatto il lavoro, ma anche tagliare i pulsanti di spegnimento, perché avevano una imbottitura che attraversava il confine tra il nav altezza. Così ho provato overflow:visible e che ha funzionato bene per me.

Lascia un commento