: blocco e overflow in linea: nascosto che porta a un diverso allineamento verticale

Il seguente codice restituisce in modo diverso nei vari browser (IE = FF = superiore rispetto alla baseline, Chrome = sulla linea di base).: blocco e overflow in linea: nascosto che porta a un diverso allineamento verticale

Di chi è la colpa? Dove dovrei presentare un bug report?
Conoscete un modo per ottenere questo cross-browser risolto. Se cambio l'allineamento verticale, posso farlo funzionare su alcuni browser, ma non sugli altri.

<!doctype html> 
<html> 
<head> 
    <style> 
     .a { 
      display: inline-block; 
      overflow: hidden; 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    baseline__<div class="a">test</div>__baseline 
</body> 
</html>

http://jsfiddle.net/T2vQj/

fonte

2013-02-14 mh543

Sembra che Chrome sia un errore. Il CSS 2.1 spec dice

La linea di base di un 'inline-block' è la linea di base della sua ultima scatola linea nel flusso normale, se questo è contrassegnato non in-flusso riquadrati di riga o se suo 'overflow' immobile ha un valore calcolato diverso da 'visibile', in in questo caso la linea di base è il bordo del margine inferiore.

Poiché la proprietà overflow calcola un valore diverso da 'visibile' basale del inline-block è il bordo margine inferiore, che si trova sulla linea di base del box riga contenente, e quindi deve sollevare il testo contenuto per consentire spazio per i discendenti di quel testo.

fonte

2013-02-14 08:16:04 Alohci

Grazie mille. http://code.google.com/p/chromium/issues/detail?id=176244 – mh543

Sì. È necessario effettuare queste operazioni:

Rimuovere lo stile overflow: hidden;. Questo non è necessario qui. Ne hai bisogno solo quando dai un width o text-overflow: ellipsis;.
Aggiungi vertical-align: bottom;. L'allineamento verticale del testo cambierà quando il display viene modificato da inline a inline-block.

fonte

2013-02-14 07:56:48

1. Ho pubblicato un esempio di lavoro minimo. Ho lasciato fuori tutto ciò che non è necessario per riprodurre il comportamento che intendevo mostrare. 2. No, l'allineamento verticale porta a risultati diversi in diversi browser, come descritto nella pubblicazione originale. – mh543

Sì. Ciascun browser gestisce il valore predefinito di 'inline-block' in essi. –

-1

Try This

<!doctype html> 
<html> 
<head> 
    <style> 
     .a { 
      display: inline; 
      overflow: hidden; 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    baseline__<div class="a">test</div>__baseline 
</body> 
</html>

fonte

2013-02-14 09:13:02 Kingk

: blocco e overflow in linea: nascosto che porta a un diverso allineamento verticale

risposta

Problemi correlati