如何在 IE 的表格单元格中将 html 选择元素 css 高度设置为 100%？答案

【问题标题】：How to set html select element css height to 100% in a table cell in IE?如何在 IE 的表格单元格中将 html 选择元素 css 高度设置为 100%？
【发布时间】：2015-10-07 16:56:41
【问题描述】：

我想让一个选择（下拉列表）元素填充 100% 的表格单元格高度。我能够让它在 Firefox 和 Chrome 中运行，但不能在 IE (Internet Explorer) 上运行。

测试 HTML：

<table>
    <tr>
      <td>
          Some cell content<br/>
          Some cell content<br/>
          Some cell content<br/>
      </td>
      <td>
        <select>
          <option>Select</option>
        </select>
      </td>
    </tr>
</table>

测试 CSS：

table {width:400px;border:solid 1px #000000;border-collapse:collapse;height:100%}
table td {border:solid 1px #000000;height:100%}
select {width:100%;height:100%;}

Here's the fiddle（适用于 Firefox 和 Chrome，但不适用于 IE）

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

table {width:400px;border:solid 1px #000000;border-collapse:collapse;height:100%}
table td {border:solid 1px #000000;height:100%}
select {width:100%!important;height:100%!important;}

<table>
    <tr>
      <td>
          Some cell content<br/>
          Some cell content<br/>
          Some cell content<br/>
      </td>
      <td>
        <select>
          <option>Select</option>
        </select>
      </td>
    </tr>
</table>

【讨论】：

不，在 IE 上不起作用（使用 IE11 测试）。我想强调一下，在我的问题上，我已经说过这适用于 Firefox 和 Chrome。问题是让它在 IE 上工作。

【解决方案2】：

IE 很可能处于怪癖模式。以前版本的 IE 没有自己绘制 select 元素，因此无法正确设置样式（以及一些 z-order 怪癖），所以在 IE

以下 sn-p 在这里可以正常工作（IE8β2）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            select {
                width:100%!important;
                height:100%!important;
            }
        </style>
    </head>
    <body>
        <form>
            <select>
                <option>1</option>
                <option>2</option>
            </select>
        </form>
    </body>
</html

希望对你有所帮助

【讨论】：

我需要这个是 HTML5 文档类型。我还注意到您更改了我最初包含在问题中的测试 HTML 代码。我需要它在表格单元格元素中工作。
嘿，亲爱的，我对你的代码做了很多修改，你可以在 IE 中使用它，因为我已经测试过了，它对我来说工作正常，你可以轻松地将 html type 转换为 html5 doctype
嘿 Moin，感谢您的努力，但请再次阅读问题。我已经说过，问题是使它在使用 IE 的 TABLE CELL (TD) 内工作。如果您可以使用我上面提供的相同测试 HTML 使其工作，那么我可能会考虑您回答
要让 height:100% 工作，所有父容器必须是 height:100%