Question

我一直在尝试在IE9中的button单元格内创建一个td。它在chrome和firefox上运行良好（尽管后者涉及将height:100%冒充到td，tr和table元素。您是否知道如何仅使用CSS解决此问题？

这是HTML：

<table>
  <tr>
    <td>
      <span class="stuff">stuff</span>
    </td>
    <td class="the-td">
      <button class="problem-here">
        <span>stuff</span>
        <span>more stuff</span>
      </button>
    </td>
  </tr>
  <tr>
    <td>stuff</td>
    <td>stuff!</td>
  </tr>
</table>

CSS：

table {
  border-collapse: collapse;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

td, tr {
  padding: 0;
  margin: 0;
  height: 100%;
}
tr {
  border: 1px solid black;
}

.problem-here {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  background: lightgreen;
  width: 100%;
  height: 100%;
}

.stuff {
  line-height: 100px;
}

.the-td {
  width: 70%
}

button span {
  display: block;  
}

最后，这里有一个小问题：https://jsfiddle.net/vh3jodap/10/

提前致谢

编辑：这是现在正在发生的事情的照片： http://i.imgur.com/J3hbWTj.png?1

Answer 1

在IE中，为了使元素具有height:100%;，所有父元素必须具有height:100%;。

任何缺少height:100%;的父母都会导致IE忽略它。

警告您的牌桌很有可能完全变大

希望这有帮助！

使按钮在IE9中的TD元素内占据全高

1 个答案: