html - IE7不放句子行，切句

Question

标签包装器 div 中有很多不同长度的标签 div。IE8、9、FF、Chrome、Safari和opera没有任何问题，但在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;
}