3

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

它在除 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>

演示

我对 js、jquery 解决方案持开放态度，但更喜欢仅使用 css 的解决方案

4

7 回答 7

10

解决它！

这是修改后的 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">

于 2012-09-07T13:59:03.673 回答
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（或更低） ，我在元素上设置一个类html（谷歌如何做到这一点）。

把你select放在里面.SelectContainer，当你点击它时，它会根据需要展开。

不需要 jQuery、条件注释等。至少满足我的需要，更简单，工作更流畅。

我希望你们都不必雇用这个。

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

于 2014-02-07T05:37:56.637 回答
1

我遇到了同样的问题，也尝试了mouseenter和mouseleave，但我认为它看起来很笨拙。我检查了选择元素的事件列表（来自 MSDN）并尝试使用beforeactivate和deactivate 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');
});
于 2013-04-05T19:41:52.277 回答
1

有问题的页面是一个非常旧的页面，它强制 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"));
  });
于 2012-09-07T21:47:41.573 回答
0

按照它可能会有所帮助的链接。

<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>
于 2015-01-20T10:46:23.110 回答
0

这是我在整理 IE8 问题时偶然发现的一个方便的插件。看看，IE8 EXPAND SELECT WIDTH。效果惊人。轻松即插即用。

于 2013-05-08T09:40:31.437 回答
-4

我认为您应该更改width属性设置：而不是固定168px使用width:auto;应该可以正常工作。

于 2012-09-07T13:24:48.027 回答