problema CSS: Combinazione di "text-align: center" e "min-width" non funziona in IE 7/IE 8 modalità compat

Ecco il mio html:problema CSS: Combinazione di "text-align: center" e "min-width" non funziona in IE 7/IE 8 modalità compat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style type="text/css"> 
    input.navbutton 
    { 
     text-align: center; 
     min-width: 100px; 
    } 
</style> 
</head> 
<body> 
    <input type="submit" class="navbutton " value="Next" /> 
</body> 
</html>

su IE 7, questo finisce per cercando in questo modo:

alt text http://i48.tinypic.com/2ijm6x5.png

Ma su Firefox sembra che questo:

alt text http://i50.tinypic.com/14o6ej9.jpg

Come si può vedere, il testo non è centrato correttamente in IE 7.

Qualche idea su come risolvere questo?

fonte

2010-02-10 einarq

Bumped nello stesso problema oggi. Non riesci a trovare una soluzione ragionevolmente accettabile ... vero? – Peter

L'aggiunta di 'line-height' sembra funzionare. Vedi la mia risposta qui sotto per un esempio completo. – Pluto

Prova questo:

input.navbutton 
{ 
    text-align: center; 
    min-width: 100px; 
    align:center; 
}

In IE (vecchia), align colpisce il testo troppo.

fonte

2010-02-10 12:46:11 Sarfraz

Grazie per il suggerimento, ma non ho dadi ho paura. – einarq

Nizza bug siete lì catturato einarq ..

Potrebbe essere correlato alla min-width bug: http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/e54188ad-cdad-4168-bbf9-2d0b5271676d

L'unica soluzione praticabile che posso vedere è far cadere il min-width e aggiungere sinistra e imbottiture di destra ..

fonte

2010-02-10 13:04:42

min-width su un pulsante già non funziona in IE6/7 (non si espanderà affatto il pulsante quando il testo è più grande, come sembra aspettarsi). Sostituiscilo con width e vivi con esso.

fonte

2010-02-10 13:08:39 BalusC

min-width è supportato da IE 7 (non IE 6), ma apparentemente è un po 'buggato. Il comportamento è corretto in IE 8 (modalità non compatibile) http://msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx – einarq

D'oh. Ho letteralmente detto 'min-width' ** su un pulsante **. Prova a vedere te stesso prima di downsoting senza testa: / – BalusC

-1

Prova margin: 0 auto; nel tuo CSS. Conosco questo testo centrale per i tag <div> ma non conosco i pulsanti.

fonte

2010-02-10 22:44:16

-1

provare a cambiare voi CSS per questo:

input.navbutton 
    { 
      text-align: center; 
      min-width: 100px; 
    }

fonte

2011-10-07 15:34:25

Mi ci volle un po 'per capirlo, ma alla fine ce l'ha. È necessario utilizzare una combinazione di tre proprietà:

input.navbutton { 
    min-width: 100px; 
    overflow: visible; 
    line-height: 120%; 
}

Il testo verrà centrato automaticamente. line-height può essere escluso se si allinea il testo a sinistra oa destra. Vedi this jsfiddle per un esempio completo.

fonte

2015-10-01 18:21:54 Pluto

problema CSS: Combinazione di "text-align: center" e "min-width" non funziona in IE 7/IE 8 modalità compat

risposta

Problemi correlati