IE9上的CSS：表格中的td元素中的div將垂直顯示

我有一系列div元素嵌套在放置在表格的td單元中的另一個div內。出於某些原因，這些div雖然被浮動到左側和內嵌塊，並且table，td和container div被設置爲寬度：100％，但它們在IE9上垂直疊加顯示。IE9上的CSS：表格中的td元素中的div將垂直顯示

這是鏈接到活動網站（請檢查樣本）：http://ssd2go.co.uk

這是我的代碼的簡化示例：

<table> 
    <tr> 
     <td> 
      <div class="select"> 
       <div><input><a><img></a></div> 
       <div><input><a><img></a></div> 
       <div><input><a><img></a></div> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div class="select"> 
       <div><input><a><img></a></div> 
       <div><input><a><img></a></div> 
       <div><input><a><img></a></div> 
      </div> 
     </td> 
    </tr> 
</table>

表，TR，TD和div.select寬度：100％; 所有內層和鏈接有浮動：左和顯示：內聯

來源

2013-02-15 unfulvio

解決方法：卸下以下屬性在IE 8-10修復它，FF，鉻：

.variations-table, 
.variations-table tr, 
.variations-table tr td, 
.variations-table tr td>div { 
    width: 100% !important; 
}

最佳實踐：理想情況下，您也希望避免使您的標記如此複雜以實現像這樣的簡單佈局。你可以從哪裏開始：儘量避免使用表格，縮短你的類名並儘量減少或消除使用ID。你可以逃脫這樣的：

<form> 
    <div class="select"> 
    <a class="select-option">120 GB</a> 
    <a class="select-option active">240 GB</a> 
    <a class="select-option">480 GB</a> 
    </div> 
    <div class="select"> 
    <a class="select-option black">Black</a> 
    <a class="select-option gray">Gray</a> 
    <a class="select-option purple active">Purple</a> 
    ... 
    </div> 
</form>

來源

2013-02-15 14:21:22

起飛寬度如下：100％來自：

.variations表，.variations表TR，.variations表TR TD， > .variations-table tr td> div

一點奇怪的選擇器也可以使用，重要的使用永遠不需要（大多數情況下）。

來源

2013-02-15 14:26:08 seemly

IE9上的CSS：表格中的td元素中的div將垂直顯示

回答

相關問題