IE 8固定宽度选择问题 [英] IE 8 fixed width select issue

问题描述

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

它在所有浏览器除了在IE8中，剪切超过宽度的文本

CSS

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

HTML

 < select> 
< option value =1>部分文字< / option> 
< option value =2>文字大于选择的宽度< / option> 
< option value =3>部分文字< / option> 
< option value =4>部分文字< / option> 
< option value =5>部分文字< / option> 
< / select> 
  

DEMO

我打开js，jquery解决方案，但更喜欢css解决方案

解决方案

有问题的页面是一个很老的页面，它强制IE 8进入兼容模式，所以css解决方案不工作。

我使用下面的 jquery

修正它假设select有一个类 fixedWidth

  $ el = $（select.fixedWidth）; 
 $ el.data（origWidth，$ el.outerWidth（））
 
 $ el.mouseenter（function（）{
 $（this）.css ，auto）; 
}）
 .bind（blur change，function（）{
 el = $（this）; 
 el.css ，el.data（origWidth））; 
}）; 
  

I have to specify a width to the select in my html.

It works fine in all browsers except in IE8, which cuts the text that is more than the width

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

I am open to js, jquery solutions, but would prefer a css only solution

解决方案

The page in question was a very old page and it forces IE 8 to go into compatibility mode, so the css solution did not work.

I ended fixing it using the following piece of jquery

Assume the select has a class of 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"));
  });

这篇关于IE 8固定宽度选择问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！