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

Posted

技术标签:

【中文标题】IE9 上的 CSS:表格中 td 元素内的 div 将垂直显示【英文标题】:CSS on IE9: divs inside td elements in a table will display vertically 【发布时间】:2013-01-31 12:11:44 【问题描述】:

我有一系列 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

【问题讨论】:

【参考方案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>

【讨论】:

【参考方案2】:

从以下宽度:100% 中取出:

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

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

【讨论】:

以上是关于IE9 上的 CSS:表格中 td 元素内的 div 将垂直显示的主要内容,如果未能解决你的问题,请参考以下文章

元素 <td> 内的自定义占位符未显示 [重复]

<the> 范围内的 CSS 样式元素

某个类中所有 td 和 th 元素的单个 CSS 选择语句 [重复]

使用css悬停时td标签上的边框移动整个表格

TD 内的动画打破了表格边框:奇怪的 chrome 错误?

如何从另一个子 td 元素检查父 tr 元素内的 td 元素的值