当与jQuery tmpl插件一起使用时，IE 8中的下拉列表会被截断

Question

我需要在一个页面上显示四个具有以下要求的选择列表：

1. 分配给选择列表的总空间是固定的（假设为400像素），即每个选择列表100像素。

2. 选项远大于100像素。要求是确保当用户点击选择列表查看选项时，它们不会被截断。

3. 该解决方案应在IE7和IE8中工作。

4. 这4个选择列表将是使用knockoutjs和jquery-tmpl插件绑定的动态模板的一部分。

我能够通过使用下面的代码来获得前3个需求（选项有硬编码的值）。当我这样做时，当用户试图查看IE8中的所有选项时，选择列表选项并没有被截断。

我还能够使用jquery tmpl插件和knockout动态加载这个模板（需求4）。然而，当我这样做的时候，选择选项开始被切断

这是代码：

<div id="content" style="width: 400px">
<div id="first" style="width:23%; float:left">
    <div style="overflow: hidden; width: 100%">
        <select>
            <option value="a">This is just a random long line. We are using it to test dropdowns in IE 8</option>
            <option value="b">This is some more random text. </option>
            <option value="c">Still trying to fit in the text.</option>
        </select>
    </div>
</div>
<div id="gapOne" style="width:2%; float:left">
    <div style="overflow: hidden; width: 100%">
    </div>
</div>
<div id="second" style="width:23%; float:left">
    <div style="overflow: hidden; width: 100%">
        <select>
            <option value="a">This is just a random long line. We are using it to test dropdowns in IE 8</option>
            <option value="b">This is some more random text. </option>
            <option value="c">Still trying to fit in the text.</option>
        </select>
    </div>
</div>
<div id="gapTwo" style="width:2%; float:left">
    <div style="overflow: hidden; width: 100%">
    </div>
</div>
<div id="third" style="width:23%; float:left">
    <div style="overflow: hidden; width: 100%">
        <select>
                <option value="a">This is just a random long line. We are using it to test dropdowns in IE 8</option>
                <option value="b">This is some more random text. </option>
                <option value="c">Still trying to fit in the text.</option>
        </select>
    </div>
</div>
<div id="gapThree" style="width:2%; float:left">
    <div style="overflow: hidden; width: 100%">
    </div>
</div>
<div id="fourth" style="width:25%; float:left">
    <div style="overflow: hidden; width: 100%">
        <select>
            <option value="a">This is just a random long line. We are using it to test dropdowns in IE 8</option>
            <option value="b">This is some more random text. </option>
            <option value="c">Still trying to fit in the text.</option>
        </select>
    </div>
</div>

这只是一条随机的长线。我们正在使用它来测试IE 8中的下拉菜单这是一些更随意的文本。仍在努力融入文本。这只是一条随机的长线。我们正在使用它来测试IE 8中的下拉菜单这是一些更随意的文本。仍在努力融入文本。这只是一条随机的长线。我们正在使用它来测试IE 8中的下拉菜单这是一些更随意的文本。仍在努力融入文本。这只是一条随机的长线。我们正在使用它来测试IE 8中的下拉菜单这是一些更随意的文本。仍在努力融入文本。

这段代码应该使用动态模板吗？如果没有，我该如何满足我的要求？

Answer 1

我记得以前在IE中看到过类似的Knockout问题。我认为一个快速的解决方案是放入以下破解：$（"select"）.width（"100px"）；（或您需要的任何宽度）。我记得它也只影响IE：-）