Question

我必须在html中指定select的宽度。

除了IE8之外，它在所有浏览器中都能正常工作，IE8会剪切超过宽度的文本

CSS

select {
        border: 1px solid #65A6BA;
        font-size: 11px;
        margin-left: 22px;
        width: 166px;
    }

HTML

<select>
        <option value="1">Some text</option>
        <option value="2">Text Larger Than the Width of select</option>
        <option value="3">Some text</option>
        <option value="4">Some text</option>
        <option value="5">Some text</option>
    </select>

DEMO

我对js，jquery解决方案持开放态度，但更喜欢仅限CSS的解决方案

Answer 1

修正了它！

以下是经过修订的jsFiddle：http://jsfiddle.net/PLqzQ/

诀窍是将focus选择器添加到CSS中，使其如下所示：

select {
        border: 1px solid #65A6BA;
        font-size: 11px;
        margin-left: 22px;
        width: 166px;
        overflow:visible ;
    }

select:focus { width:auto ;
position:relative ;
}

我在IE8中进行了测试，它就像一个魅力。

非常重要：您必须向您的代码添加Doctype定义，否则修复将不适用于IE8。

实施例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Answer 2

我发现所有其他答案都非常脆弱且过于复杂。这可以通过以下CSS轻松完成（至少在我的情况下）：

html.IE8 .SelectContainer {
    position: relative;
}

html.IE8 .SelectContainer select {
    position: absolute;
    width: auto; /* Or fixed if you want. */
    max-width: 100%;
}

html.IE8 .SelectContainer select:focus {
    max-width: none;
}

如果浏览器是IE8（或更低版本）（Google如何执行此操作），我会在html元素上设置一个类。

将select放在.SelectContainer内，当您点击它时，它会根据需要展开。

不需要jQuery，条件评论等。至少对我的需求来说，更简单，更顺畅。

我希望你们没有人能雇用这个。

现在是美国政府升级到现代浏览器的时候了！

Answer 3

有问题的页面是一个非常旧的页面，它迫使IE 8进入兼容模式，因此css解决方案无效。

我使用以下jquery

结束修复它

假设select有一个fixedWidth

类

$el = $("select.fixedWidth");
$el.data("origWidth", $el.outerWidth()) 

$el.mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });

Answer 4

我遇到了同样的问题，并尝试了 mouseenter 和 mouseleave ，但我认为它非常笨拙。我检查了event list for select elements (from MSDN)并尝试使用 beforeactivate 和停用 intead。在我看来，它工作得更顺利。直接在IE8中运行的页面上测试（非兼容模式）：

$('select').beforeactivate(function () {
    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (!isIE8)
        return;
    $(this).css('width', 'auto');

});

$('select').deactivate(function () {
    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (!isIE8)
        return;
    $(this).css('width', '166px');
});

Answer 5

这是一个方便的插件我在排序IE8问题时偶然发现。看看，IE8 EXPAND SELECT WIDTH。工作惊人。轻松即插即用。

Answer 6

follow the link it may help.

<script>
  $(document).ready(function() {
    $('select').change(function(){
      $("#width_tmp").html($('select option:selected').text());
      $(this).width($("#width_tmp").width()+30); // 30 : the size of the down arrow of the select box 
    });
  });
</script>

Answer 7

我认为您应该更改width属性设置：而不是固定168px使用width:auto;应该完美无缺。

IE 8固定宽度选择问题

7 个答案: