Question

我有一系列div元素嵌套在另一个div中，放在一个表的td单元格中。出于某种原因，这些div虽然浮动到左侧和内联块，但是table，td和container div都设置为width：100％，它们在IE9上显示为垂直堆叠。

这是指向实际网站的链接（检查样本）：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>

table，tr，td和div.select是width：100％; 所有内层和链接都有float：left和display：inline

Answer 1

修复：删除以下属性会在IE 8-10，FF，Chrome中修复它：

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

Answer 2

取下以下宽度：100％来自：

.variations-table，.variations-table tr，.variations-table tr td，＆gt; .variations-table tr td＆gt;格

也可以使用一些奇怪的选择器，并且永远不需要使用重要的（在大多数情况下）。

IE9上的CSS：表格中的td元素内的div将垂直显示

2 个答案: