html - IE7は文を子行にしない、文を切る

Question

タグラッパーdivには、さまざまな長さのタグdivが多数あります。IE8、9、FF、Chrome、Safari、オペラでは問題ありませんが、IE7では壊れています。この問題を解決するにはどうすればよいですか？

HTML：

<div class="tag-wrapper">
    <div class="tag"><a href="#">text text text</a></div>
    <div class="tag"><a href="#">text text</a></div>
    <div class="tag"><a href="#">text text</a></div>
    <div class="tag"><a href="#">text text text</a></div>
    <div class="tag"><a href="#">text text text text</a></div>
</div>

CSS：

.tag-wrapper{
    float: left;
    height: 200px;
    padding: 12px 12px 12px 20px;
    width: 500px;
    overflow:hidden;
    border:1px solid #000;
 }

.tag-wrapper .tag{
    background:url(img/corner02.png) no-repeat 0 0; 
    vertical-align:middle;
    padding: 0 0 0 10px;
    display:inline-block;
    height:24px;
    margin: 0 10px 9px 0;
    float:left;    
}

.tag-wrapper .tag a:link{
    width:auto;
    overflow:visible;
    height:24px;
    line-height:24px;
    padding:0 5px 0 5px;
    background:#F00;
    float:left;
    color:#FFF;
    text-decoration:none;
    font-weight:bold;   
 }

.tag-wrapper .tag a:hover{
    color:#000;   
 }

IE8、IE9、Chrome、Firefox、Safari、Operaのスクリーンショット

IE7のスクリーンショット

http://jsfiddle.net/B7Tjw/2/

Answer 1

このコードを試してください: 正常に動作しています。

.tag-wrapper .tag a:link{
    width:auto;
    overflow:visible;
    height:24px;
    line-height:24px;
    padding:0 5px 0 5px;
    background:#F00;
    float:left;
    color:#FFF;
    text-decoration:none;
    font-weight:bold; 
    white-space:pre;
}