puntini di sospensione in opere css in Firefox (16.0.2), ma non in Chrome (22.0.1229.94)

Question

Ho il seguente codice HTML:

<div class="x"> 
    <div class="y" title="aaaaa"> 
     <a href="/"> 
      aaaaa 
     </a> 
    </div> 
    <div class="y" title="bbbbbb"> 
     <a href="/"> 
      bbbbbb 
     </a> 
    </div> 
    <div class="y" title="ccccc"> 
     <a href="/"> 
      ccccc 
     </a> 
    </div> 
    <div class="y" title="dddddddd"> 
     <a href="/"> 
      dddddddd 
     </a> 
    </div> 
</div> 

con i CSS:

.x{ 
    width: 10em; 
    background-color: #FFB9B9; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
.y { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 18px; 
    font-weight: bold; 
    line-height: 18px; 
    white-space: nowrap;  
    background-color: #E1CECE; 
    display: inline-block; 
} 

cui è possibile vedere qui: http://jsfiddle.net/fDBbm/

I puntini di sospensione funzionavano sin dall'inizio in Firefox (16.0.2) ma non in Chrome (22.0.1229.94).

Answer 1

Questo è un bug derivante dall'utilizzo di display:inline-block e text-overflow: ellipsis. Sfortunatamente Chrome non gestisce correttamente le proprietà se abbinato/utilizzato insieme.

Il bug è stato segnalato qualche mese fa: http://code.google.com/p/chromium/issues/detail?id=133700

Answer 2

Come soluzione alternativa si potrebbe usare display:inline invece di display:inline-block;

FIDDLE

Tuttavia, questo fa sì che i singoli elementi 'Y' per perdere il loro colore di sfondo ...

Quindi per risolvere che potremmo aggiungere:

.y:after { 
    content: ''; 
    display: inline-block; 
} 

FIDDLE

ora è lavorare in FF e Chrome (e BTW, IE pure).