Html IE 8 固定宽度选择问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12318057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE 8 fixed width select issue
提问by Clyde Lobo
I have to specify a width to the selectin my html.
我必须select在我的 html 中指定宽度。
It works fine in all browsers except in IE8, which cuts the text that is more than the width
它在除 IE8 之外的所有浏览器中都能正常工作，它会剪切超过宽度的文本
CSS
CSS
select {
border: 1px solid #65A6BA;
font-size: 11px;
margin-left: 22px;
width: 166px;
}
HTML
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>
I am open to js, jquery solutions, but would prefer a css only solution
我对 js、jquery 解决方案持开放态度，但更喜欢仅使用 css 的解决方案
采纳答案by Clyde Lobo
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.
有问题的页面是一个非常旧的页面，它强制 IE 8 进入兼容模式，因此 css 解决方案不起作用。
I ended fixing it using the following piece of jquery
我结束了使用以下部分修复它 jquery
Assume the select has a class of fixedWidth
假设选择有一个类 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"));
});
回答by Cynthia
Fixed it!
修复！
Here is the revised jsFiddle: http://jsfiddle.net/PLqzQ/
这是修改后的 jsFiddle：http: //jsfiddle.net/PLqzQ/
The trick is adding the focusselector to your CSS so that it looks like this:
诀窍是将focus选择器添加到您的 CSS 中，使其看起来像这样：
select {
border: 1px solid #65A6BA;
font-size: 11px;
margin-left: 22px;
width: 166px;
overflow:visible ;
}
select:focus { width:auto ;
position:relative ;
}?
I tested it in IE8 and it works like a charm.
我在 IE8 中对其进行了测试，它的效果非常好。
VERY IMPORTANT: You have to add a Doctype Definition to your Code otherwise the fix won't work for IE8.
非常重要：您必须在代码中添加 Doctype 定义，否则该修复程序将不适用于 IE8。
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
回答by Josh M.
I found all the other answers to be really flaky and over-complicated. This can be easily accomplished with the following CSS (at least in my case):
我发现所有其他答案都非常片面且过于复杂。这可以使用以下 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;
}
I set a class on the htmlelement if the browser is IE8 (or less) (Google how to do this).
html如果浏览器是 IE8（或更低版本），我会在元素上设置一个类（谷歌如何做到这一点）。
Put your selectinside a .SelectContainerand when you click it, it will expand as needed.
把你的select里面 a .SelectContainer，当你点击它时，它会根据需要展开。
No need for jQuery, conditional comments, etc. Much simpler and works much smoother, for my needs, at least.
不需要 jQuery、条件注释等。至少对于我的需要，它更简单，工作更流畅。
I hope none of you ever have to employee this.
我希望你们中的任何人都不必为此付出代价。
It's time for the US gov't to upgrade to a modern browser!
现在是美国政府升级到现代浏览器的时候了！
回答by mckrecker
I had the same problem and also tried mouseenterand mouseleavebut I thought it was very clumsy-looking. I checked the event list for select elements (from MSDN)and tried using beforeactivateand deactivateintead. It worked much more smoothly in my opinion. Tested on a page running in IE8 directly (not compatibility mode):
我遇到了同样的问题，也尝试过mouseenter和mouseleave但我认为它看起来很笨拙。我检查了选择元素（从MSDN）事件列表，并尝试使用beforeactivate和停用这一翻译。在我看来，它工作得更顺利。在直接在 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');
});
回答by Nupur
This was a handy plugin i stumbled upon while sorting IE8 issues. Do have a look, IE8 EXPAND SELECT WIDTH. Works amazing. Easy plug-n-play.
这是我在整理 IE8 问题时偶然发现的一个方便的插件。看看，IE8 EXPAND SELECT WIDTH。效果惊人。简单的即插即用。
回答by Bharath Raj
<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>
回答by ram
I think you should change the widthattribute setting: instead of fixed 168pxuse width:auto;Should work perfectly.
我认为您应该更改width属性设置：而不是固定168px使用width:auto;应该可以完美工作。
