Testo segnaposto HTML5 che aggiunge larghezza in Safari che causa barre di scorrimento e sfarfallio

In Safari e Chrome, l'attributo placeholder sembra aggiungere larghezza invisibile, causando barre di scorrimento orizzontali e un rendering simile a sfarfallio quando la finestra viene ridimensionata orizzontalmente.Testo segnaposto HTML5 che aggiunge larghezza in Safari che causa barre di scorrimento e sfarfallio

overflow: hidden; può essere applicato all'elemento padre per contenere il problema. Tuttavia, ritaglia i miei effetti di fuoco sul campo modulo.

Esiste un modo per utilizzare determinati valori dei prefissi dei fornitori per impedire che ciò si verifichi, ad esempio ::-webkit-input-placeholder {} o in un altro modo?

Quando l'attributo viene aggiunto all'input del modulo, una barra di scorrimento orizzontale sfarfalla quando viene ridimensionata orizzontalmente su un browser webkit. In particolare, quale stile sta attivando questo comportamento? E come prevengo o sovrascrivo questo comportamento !?

fonte

2012-12-09 Orphaned Record

Qualche amore là fuori? Immagino sia domenica. Certo, ci sono un sacco di stili ereditati perché sto usando un sistema di grid, ma se qualcuno può indicarmi la giusta direzione usando FireBug o qualsiasi altro consiglio sarebbe molto apprezzato! –

Sto utilizzando l'ultima versione di Chrome e non ho riscontrato lo sfarfallio? Usi per caso le transizioni o le animazioni CSS3? – Ben

No, ho tolto tutto il CSS tranne input [type = "text"] {width: 100%; }. Ho testato il collegamento che ho fornito sopra su tutti i principali browser sia per PC che per Mac OSX. La barra laterale orizzontale appare e scompare rapidamente quando ridimensiona orizzontalmente la finestra del browser. Normalmente questo potrebbe non essere un grosso problema, ma sto lavorando su un design reattivo e la visualizzazione mobile può essenzialmente diventare "cortina" con il mio sistema di rete. –

Molti elementi di input hanno il riempimento predefinito. Quando si specifica width: 100%, l'elemento diventa larghezza 100% + riempimento. Per evitare che l'imbottitura aumenti la larghezza usa semplicemente box-sizing: border-box;

fonte

2013-05-25 05:14:40 Duopixel

Sì, ho anche iniziato a modificare il modello di box per gli elementi dopo aver letto un articolo di Paul Irish. Non sto applicando a tutti gli elementi come menziona l'articolo ma usando un selettore come.modulo> * {-moz-box-dimensionamento: border-box; -webkit-box-dimensionamento: border-box; dimensionamento della scatola: border-box;} sembra tutto ok Probabilmente non è il selezionatore più performante, ma la soluzione migliore che ho trovato! http://www.paulirish.com/2012/box-sizing-border-box-ftw/ –

Ho guardato il tuo sito in Chrome e Safari, ma non sembra che abbia il problema che hai menzionato. Tuttavia, l'immagine in alto trabocca verso l'alto perché hai nascosto l'overflow nascosto e non hai impostato un margine superiore per l'intestazione. Quindi, sono andato avanti e ho creato questo margine:

#header img { 
    margin-top: 50px; 
}

e che ha risolto il problema. Vorrei poter pubblicare un'immagine.

fonte

2013-07-23 16:29:40 Adam

Testo segnaposto HTML5 che aggiunge larghezza in Safari che causa barre di scorrimento e sfarfallio

risposta

Problemi correlati