IE 8固定寬度選擇問題

我必須在我的html中指定一個寬度爲select。IE 8固定寬度選擇問題

它正常工作，在所有瀏覽器除了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解決方案

來源

2012-09-07 Clyde Lobo

要修復的寬度之後，你想，如果文本更多的則是你的選擇菜單應加大儀式？ – supersaiyan

我想你永遠不會得到理想的結果。 IE8（及以下版本）已編程顯示如此的選擇列表。谷歌搜索和這彈出：http://css-tricks.com/select-cuts-off-options-in-ie-fix/哪種工作，它使選擇框更廣泛時懸停在IE中。然而，問題可能會出現，取決於你如何定位你的'select'元素。如果它只是內聯，那麼突然改變寬度可能會改變其他方面。 – Chris

不幸的是，解決方案不適合我，因爲選擇是在菜單中，這會導致菜單扭曲 –

有問題的頁面是一個非常古老的網頁，並迫使IE 8進入兼容模式，這樣的CSS的解決方案沒有奏效。

我最後用下面這段jquery

假設選擇固定它具有類的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-07 21:47:41

我無法從此獲得結果，請您在jsfiddle上進行演示。謝謝 –

-4

我認爲你應該改變width屬性設置：而不是固定的168px使用width:auto;應該完美的工作。

來源

2012-09-07 13:24:48 ram

寬度是必要的。不能指定自動 –

修好了！

下面是修改後的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-07 13:59:03 Cynthia

這種行爲很笨拙，而不像其他瀏覽器中的行爲一樣。選擇文本的長度不應加寬，但下拉。 – NixRam

@NitinRam這不是一個很好的解決方案，但至少它的工作原理。我們正在嘗試修復瀏覽器問題，所以我們已經得到了一個:)我會將這個CSS應用於ie8，儘管 –

我有同樣的問題，也試圖的mouseenter和鼠標離開但我以爲這是非常笨拙的樣子。我檢查了event list for select elements (from MSDN)並嘗試使用之前激活和停用 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-05 19:41:52 mckreck

這是一個方便的插件，我偶然在排序IE8的問題。看一看，IE8 EXPAND SELECT WIDTH。令人驚歎。易插即用。

來源

2013-05-08 09:40:31 Nupur

我發現所有其他的答案是非常片狀和過於複雜。這可以用下面的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; 
}

我設置一個類的html元件上，如果瀏覽器IE8是（或更少）（谷歌如何做到這一點）。

將您的select放在.SelectContainer的內部，當您點擊它時，它會根據需要展開。

不需要jQuery，條件註釋等等。至少對於我的需要來說，更簡單並且工作得更順暢。

我希望你們沒有人必須僱用這個。

現在是美國政府升級到現代瀏覽器的時候了！

來源

2014-02-07 05:37:56

比使用JS好得多。可能包裝 <！ - [if IE 8]> – Daft

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>

來源

2015-01-20 10:46:23

IE 8固定寬度選擇問題

回答

相關問題