Question

我想让select（下拉列表）元素填充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）

Answer 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>

Answer 2

IE很可能处于怪癖模式。 IE的早期版本本身并没有绘制select元素，因此无法正确设置样式（以及一些z顺序怪癖），因此在IE＆lt; 8你根本做不到，除非你重新实现像JS中的select之类的东西。查看开发人员工具（F12），了解IE所处的浏览器和文档模式;如果它为浏览器模式显示“Internet Explorer 8”而文档模式没有“Quirks模式”，那么你应该没问题：）

以下代码段在这里工作正常（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

希望这可能会对你有所帮助

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

2 个答案: