IE7不放句子行，切句子

標籤包裝div中有很多不同長度的標籤div。對於IE8,9，FF，Chrome，Safari和Opera沒有任何問題，但是對於IE7而言它已經崩潰了。我該如何解決這個問題？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瀏覽器，火狐，Safari，歌劇

enter image description here

截圖供IE7

enter image description here

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

來源

2013-01-23 midstack

嘗試將'white-space：pre'添加到'.tag-wrapper .tag a：link'：http://jsfiddle.net/B7Tjw/3/。你可以使用獨立的「ie7.css」和條件註釋來包含它，而不是將它合併成「普通」的CSS。 – Passerby

謝謝@Passerby工作正常 – midstack

試試這個代碼：這是工作的罰款。

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

來源

2013-01-23 11:24:32

IE7不放句子行，切句子

回答

相關問題