IE7寬度：汽車的問題

Question

CSS

#wrapper .tn{ 
     width:auto; 
     height:20px; 
     line-height:20px; 
     float:left; 
     padding:5px 2px 5px 5px; 
     margin:0 5px 10px; 
     font-weight:bold; 
     background:#f0f0f0; 
    } 

HTML

<div id="wrapper"> 
     <div class="tn">Text</div> 
     <div class="tn">Text</div> 
     <div class="tn">Text</div> 
    </div> 

上面的代碼在FF，Chrome瀏覽器，Safari瀏覽器，歌劇，IE9，IE8工作順利。但是IE7存在問題。 Div不會根據文本擴展。它將wrapper div覆蓋爲寬度。我怎樣才能解決這個問題？

Answer 1

似乎沒什麼問題，使用IE7的開發工具被選中，您可以嘗試display: inline-block;代替float

#wrapper .tn{ 
    height:20px; 
    line-height:20px; 
    padding:5px 2px 5px 5px; 
    margin:0 5px 10px; 
    font-weight:bold; 
    background:#f0f0f0; 
    display: inline-block; 
} 

Answer 2

我假設你正在談論的是#wrapper指定的DIV？ #wrapper無法展開，因爲您需要清除浮動圖案

請查看HTML5 Boilerplate中的clearfix類（https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css ）

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 

/* 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 

.clearfix { 
    *zoom: 1; 
} 

所以這樣做在你的代碼：

<div id="wrapper" class="clearfix"> 
    <div class="tn">Text</div> 
    <div class="tn">Text</div> 
    <div class="tn">Text</div> 
</div>