我有一系列 div 元素嵌套在另一个 div 中,该 div 放置在表格的 td 单元格中。出于某种原因,这些 div,虽然它们 float 到左侧和内联 block ,而表、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
最佳答案
修复:删除以下属性可在 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>
关于IE9 上的 CSS : divs inside td elements in a table will display vertically,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14896058/