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将垂直显示

回答

相关问题