wielokropek w pracach CSS w Firefoksie (16.0.2), ale nie w Chrome (22.0.1229.94)

Question

Mam następujące 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> 

z 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; 
} 

które można zobacz tutaj: http://jsfiddle.net/fDBbm/

Ellipsis pracował od samego początku w Firefoksie (16.0.2), ale nie w Chrome (22.0.1229.94).

Answer 1

To błąd wynikający z używania display:inline-block i text-overflow: ellipsis. Niestety Chrome nie obsługuje poprawnie właściwości po sparowaniu/użyciu razem.

Błąd został zgłoszony kilka miesięcy temu: http://code.google.com/p/chromium/issues/detail?id=133700

Answer 2

Jako obejście można użyć display:inline zamiast display:inline-block;

FIDDLE

Jednak to powoduje, że poszczególne elementy 'y' tracą kolor tła ...

Aby to naprawić, możemy dodać:

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

FIDDLE

Teraz działa w FF i Chrome (i BTW, IE, jak również).