Question

我的网站上有一个表格，其中一个单元格中有一个select元素。如果我尝试更改元素的内容，在我尝试过的大多数浏览器中一切正常（包括IE6，令人惊讶的是），但在IE7中，表格单元格不会调整其宽度以适应select元素。有没有办法让表格单元格正确调整大小？

您可以通过这个简单的测试找到问题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Table cell width test</title>
</head>
<body>
<table>
    <tr>
        <td style="border: solid black 1px">
            <select id="test">
            </select>
        </td>
    </tr>
</table>
<script type="text/javascript">
window.onload = function() {
    var option = document.createElement("option");
    option.innerHTML = "asdfasdfasdfasdfasdfasdfasdfasdf";
    document.getElementById("test").appendChild(option);
};
</script>
</body></html>

Answer 1

是的，这是IE的一个糟糕的问题，被称为“hasLayout”。要理解这个问题，这是一篇很棒的文章：http://www.satzansatz.de/cssd/onhavinglayout.html

要解决您的问题，您只需强制单元格及其内容重新计算其布局。一种简单的方法是只追加并删除一个空div：

<script type="text/javascript">
window.onload = function() {
    var test = document.getElementById('test');
    var option = document.createElement("option");
    option.innerHTML = "asdfasdfasdfasdfasdfasdfasdfasdf";
    test.appendChild(option)

    var div = document.createElement("div");
    test.parentNode.appendChild(div);
    test.parentNode.removeChild(div);
}
</script>

Shitty ......但它确实有效。

干杯

Answer 2

看起来你也可以将显示更改为无，然后再返回内联，一个接着一个，它将解决问题，似乎也不会导致闪烁。

jQuery.fn.ie7fix = function(){
    if (!($.browser.msie && $.browser.version == "7.0")) return $(this);
    return $(this).hide().show();
};
$('#test').append('<option>asdfasdfasdfasdfasdfasdfasdfasdf</option>').ie7fix();

如果通过JavaScript更改了选择元素内容，则表格单元格宽度在IE7中不会更改

2 个答案: