1

我有一些动态填充选择框的旧版 JavaScript 代码。在 Firefox 中，它看起来不错。在 IE7 中，布局是错误的（见下文）。如果我重新调整窗口大小，它会正确重新呈现选择框。

这是重新调整浏览器窗口大小之前的屏幕截图。

IE7 很烂

下面是代码完整的源代码：

<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>很好地使两个元素布局？

4

1 回答 1

1

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

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

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

于 2013-05-02T11:15:21.923 回答