internet-explorer-10 - IE10 テキストオーバーフローの省略記号が機能しない

Question

HTMLに<a>タグがあり、省略記号にしたいです。しかし<div>、タグ内に を追加する<a>と、「text-overflow」が機能しません。

HTML:

<div class=boxed>
  <h1>text-overflow Attribute Sample</h1>
    <a href="#" class="caption">
      <!----><div style="width:100px;height:20px;border: 1px solid red"></div>
      Each box (div element) below contains the following text:
    </a>
</div>

CSS:

div.boxed {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    font: 14px Times New Roman, serif;
    overflow:hidden;
    'position:relative;
}
a.caption {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display:block;
    text-decoration:none;
    float:left;
    text-align:left;
}

http://jsfiddle.net/nPzsy/

を削除する<div>と、「テキストオーバーフロー」が再び機能します。