Question

我有一些遗留的JavaScript代码可以动态填充选择框。在Firefox中，它看起来很好。在IE7中，布局错误（见下文）。如果我重新调整窗口大小，它会正确地重新渲染选择框。

以下是重新调整浏览器窗口大小之前的截图。

IE7 SUCKS

以下是代码完整源代码：

<html>
 <head>
  <title> Test </title>
 </head>

<script type="text/javascript">
<!--

var MyOptions = {
    "A" : "Option 1 (A)",
    "B" : "Option 2 (B)",
    "C" : "Option 3 (C)",
    "D" : "Option 4 (D)"
}

var MyForm = {

    loadSelectBox : function () {

        dropDown=document.getElementById("my_select_box");

        while(dropDown.hasChildNodes()) {
            dropDown.removeChild(dropDown.lastChild);
        }

        var firstOption = document.createElement('option');
        firstOption.value = '';
        firstOption.innerHTML = 'select a filter';
        dropDown.appendChild(firstOption);

        for (var key in MyOptions) {
            var option = document.createElement('option');
            option.value = key;
            option.innerHTML = MyOptions[key];
            dropDown.appendChild(option);
        }

    }
}

function init() {
    MyForm.loadSelectBox();
} //-->
</script>

<body onload="init();">
    <div style="margin:0px 10px 0px 10px; width:98%">
        <div style="float:left;">  
            <select id="my_select_box">
                <!-- options go here -->
            </select>
        </div>
        <div style="float:left;margin-left:25px;">
            <input type="checkbox" id="is-foo" style="visibility:visible;">
            <label for="is-foo" style="visibility:visible;">Some label</label>
            <input type="button" value="Submit">
        </div>
    </div>
    <br class="clear"/>
</body>
</html>

如何在IE7中正确布局？我需要动态填充选择框（这是代码的一个简化版本;实际的应用程序是从Web服务获取值）。

我尝试使用长值（JavaScript将丢弃）初始化选择框，即

<select id="my_select_box">
    <option name="">Really long value that will be removed but is here for padding.</option>
</select>

然而，这看起来仍然不正确，感觉就像一个黑客。是否有一些CSS会使两个<div>元素布局得很好？

Answer 1

您可以在填充列表后强制重新绘制元素：

document.getElementById('repaintMe').style.zoom = 1;

然而，这可能会导致页面闪烁（取决于布局），因此您可能应该将其与最小宽度规则结合使用或应用不同的包装器，例如。表。在此处重新绘制示例http://cdpn.io/ubiva

动态填充的选择框与IE 7中的相邻div元素重叠

1 个答案: