1

我有一系列 div 元素嵌套在另一个 div 中，该 div 放置在表格的 td 单元格中。出于某种原因，这些 div 尽管它们浮动到左侧和内联块，并且 table、td 和容器 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

4

2 回答 2

1

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

.variations-table, .variations-table tr, .variations-table tr td, > .variations-table tr td > div

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

于 2013-02-15T14:26:08.253 回答
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>
于 2013-02-15T14:21:22.273 回答