使用IE在DIV中使用HTML选择的宽度问题

Question

以下是我放在jsfiddle

上的一个例子

<div style='width:30px;border:solid 1px'>
  <select style='width:100%'>
    <option>This is my first option</option>
    <option>option</option>
  </select>
</div>

<br/>
<br/>

<div style='width:300px;border:solid 1px'>
  <select style='width:100%'>
    <option>This is my first option</option>
    <option>option</option>
  </select>
</div>

在IE 7/8以外的每个浏览器（FF，Chrome，Safari，IE9，IE9模式下的IE9）中，第一个组合的选项完全可见。 IE8将选项的宽度限制为外部div的宽度。

这是

知道如何解决这个问题吗？

Answer 1

将overflow: hidden;添加到div的样式，将width: auto; float: right;添加到<select>似乎对我有用。

<div style='width:30px;border:solid 1px; overflow: hidden'>
   <select style='width:auto; float: right;'>
      <option>This is my first option</option>
      <option>option</option>
   </select>
</div>

请参阅http://jsfiddle.net/J7sYq/10/

上的工作示例

Answer 2

遗憾的是，没有css解决方案，因为它与元素行为有关。 因此，我将引导您到另一个来源。 http://css-tricks.com/select-cuts-off-options-in-ie-fix/ 这会在聚焦时改变元素的宽度，并在失去焦点时将其设置回来。不是很优雅，但仍然可以看到整个选项。 希望这会有所帮助。

Answer 3

我知道这里已经有很多答案。但是当我遇到同样的问题时，没有一个解决方法真的适合我的要求：我需要将select放在一个固定的宽度div中。超出宽度，它将被隐藏，我不想看到它 - 这是纯粹的丑陋。我第一次看到this链接时，我终于找到了我想要的东西。但在玩完演示后，我很失望。 CSS技巧有点工作但它会改变整个宽度而不仅仅是下拉列表。我需要的是一个非常好看的选择，就像它应该在IE之外的其他浏览器上看。

我终于使用javascript和css以及一些特定版本的检查来自行解决。这是我所做的总结：

1. 使用与select相同的透明div来覆盖选择。现在我们仍然可以在div下看到该项目，但我们无法点击它。
2. 透明div现在拦截鼠标单击并使用select中的项目填充无序列表。然后我们在原始选择下面显示列表。它看起来与其他浏览器上的点击选择完全相同。
3. 当在无序列表中选择某个项目时，该列表将被隐藏，并且将选择原始选择中的相应项目。

这种方法需要更多代码，但它确实模拟了选择的“正确”行为。无序列表使用css设置样式，可以更轻松地更改外观。它在ie7-8下测试。

以下是在8：

中查看的工作项目的屏幕截图

---

Answer 4

不知道任何解决方案（这是IE幻想世界）。可能是IE8或更低版本的不同小部件（extjs combo，jquery ui combo或某些pop菜单库）。

Answer 5

这对我有用：

<div style='max-width:300px;min-width:300px;border:solid 1px'>
<select style='width:300px'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
<br/><br/>

Answer 6

在你的css属性之前使用*即特定的css。 标有*时，ie8可以理解

p.myclass {
     width: 30px;
     *width: 300px;
}/* Just an example*/

ie8浏览器将使用您指定的属性并使用它。通过这种方式，您可以提醒您的网站特定于ie8，但您的属性*应该在默认属性之后。看到代码

Answer 7

您已指定包含选择框的外部div的宽度。在所有浏览器中，它看起来都一样。

如果您希望它根据选择框中选项的长度进行拉伸，则只需指定任何宽度或仅指宽度：auto。 请检查此http://jsfiddle.net/J7sYq/3/