javascript - オーバーフロー: 非表示は IE8 で余分なスペースを消費しますか?

Question

以下のhtmlコードがあります

<div id="tabsDiv" >
    <ul id="myTabs" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
            <a href="#ui-tabs-2">Testing it for creation  Testing it for creation subject Testing it for creation subject 
            Testing it for creation  Testing it for creation  Testing it for creation subject Testing it 
            for creation  Ends here</a>
            <a>
        </li>
    </ul>
</div>

cssコードはこちら

#myTabs li a {
  font-size: 9pt;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

この場合、大きなハイパーリンクがあると問題に直面しています。テスト.....ここで終了します。何が起こるかというと、css は 200px プラス 3 ドット内に収まる文字のみを表示しますが、完全なテキストのスペースを不必要に消費します。したがって、別の li タグを追加すると、大きなスペースの後に開始されます。IE9、FF、chromeでは正常に動作しますが、IE8では動作しませんか?

Answer 1

追加するdisplay:blockかinline-block 、JSFiddleでチェックしてみてください