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

我需要在页面上显示四个选择列表，并满足以下要求：

分配给选择列表的总空间是固定的（比如400 px），即每个选择列表100 px

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

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

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

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

我还能够使用jquerytmpl插件和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>

这只是一条随机的长线。我们用它来测试IE8中的下拉列表
这是一些更随机的文本。
仍在努力融入文本。
这只是一条随机的长线。我们用它来测试IE8中的下拉列表
这是一些更随机的文本。
仍在努力融入文本。
这只是一条随机的长线。我们用它来测试IE8中的下拉列表
这是一些更随机的文本。
仍在努力融入文本。
这只是一条随机的长线。我们用它来测试IE8中的下拉列表
这是一些更随机的文本。
仍在努力融入文本。

这只是一条随机的长线。我们用它来测试IE8中的下拉列表 这是一些更随机的文本。 仍在努力融入文本。 这只是一条随机的长线。我们用它来测试IE8中的下拉列表 这是一些更随机的文本。 仍在努力融入文本。 这只是一条随机的长线。我们用它来测试IE8中的下拉列表 这是一些更随机的文本。 仍在努力融入文本。 这只是一条随机的长线。我们用它来测试IE8中的下拉列表 这是一些更随机的文本。 仍在努力融入文本。

---

这段代码应该与动态模板一起工作吗？如果没有，我该如何满足我的需求呢？

我记得在IE中看到过类似的问题。我认为一个快速的解决方案是加入以下代码：$（“选择”）.width（“100px”）；应用绑定后（或任何需要的宽度）。我记得它也只影响IE:-）

如何确保应用绑定。根据您的建议，我在页面末尾添加了以下代码：$（“selectOne”）.width（“98px”）；但它不起作用。这里selectOne是第一个select元素的id；在你的应用程序绑定调用后再做。好的，很好。现在我可以看到下拉选项占用了我在代码行中指定的空间。有没有办法，我们可以分配它所需的空间，以容纳选项中的最大值，而不是硬编码为98像素或其他什么。另外，现在下拉箭头似乎不见了。不幸的是，我不知道这个问题的“干净”解决方案。我想你可以从你的最长文本值中得到一个合适的宽度…我不知道你的模型，但我想最简单的方法是遍历你的列表并找到最长的字符串…我想你也可以提前在你的模型中预算它…非常感谢TGH。我会试试看能不能找到什么。还有，你知道为什么下拉列表末尾的箭头现在不见了吗？