Question

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

分配给选择列表的总空间是固定的（比如400 px），即每个选择列表100 px。
选项远大于100像素。要求是确保在用户点击选择列表以查看选项时不会显示它们。
解决方案应该适用于IE7和IE8。
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>

此代码是否适用于动态模板？如果没有，我怎么能满足我的要求？

Answer 1

我记得在使用Knockout之前在IE中看到过类似的问题。我认为一个快速的解决方案是进行以下黑客攻击：$（“select”）。width（“100px”）; （或者您需要的任何宽度）在应用绑定之后。我记得它也只影响了IE： - ）

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

1 个答案: