下拉框被砍掉

Question

我需要顯示在頁面上四個選擇列出下列要求：

1. 分配給選擇列表是固定的總空間（讓我們比如400 px），即每個選擇列表100 px。

2. 該選項比100 px大得多。要求是確保當用戶點擊選擇列表來查看選項時，它們不應該被切斷。

3. 該解決方案應該在IE7和IE8中工作。

4. 4個選擇列表將成爲使用knockoutjs和jquery tmpl插件綁定的動態模板的一部分。

我能夠通過使用下面的代碼（具有選項的硬編碼值）得到前3個要求。當我這樣做時，當用戶試圖查看IE8中的所有選項時，選擇列表選項不會被切斷。

我也能夠使用jquery tmpl插件和淘汰賽（需求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

我記得在使用Knockout之前在IE中看到類似的問題。我認爲一個快速解決方案是放入以下黑客：$（「select」）.width（「100px」）; （或者你需要的任何寬度）。我記得它也隻影響IE :-)