ブラウザはSELECTタグ内にリストテキストのスペースを表示しませんか？

Question

私はIE7を使用しています、そして、それはテキスト内の先頭のスペースなしで私のSELECTタグのオプションを表示するようです - テキストがトリミングされているようです。たとえば、下のHTMLコードブロックでは、オプション1〜3にはテキストの前に3つのスペースがありますが、ブラウザを表示するとトリムを実行して先頭のスペースなしでユーザーに表示しているようです。

コードブロック1：

<select size="3"> 
    <option value="1"> aaa</option> 
    <option value="2"> bbb</option> 
    <option value="3"> ccc</option> 
    <option value="4">ddd</option> 
    <option value="5">eee</option> 
</select> 

また、あなたはJavaScriptを通じ、オプションのテキストにアクセスすると、返される値もトリミングされているようです。

コードブロック2：

var value = list.options[i].text; 

は、同様にスペースを表示するには、ブラウザを強制する方法はありますか私がで立ち往生しています。この何ですか？スペースの代わりに

Answer 1

使用 ：

<select size="3"> 
    <option value="1">&nbsp;&nbsp;&nbsp;aaa</option> 
    <option value="2">&nbsp;&nbsp;&nbsp;bbb</option> 
    <option value="3">&nbsp;&nbsp;&nbsp;ccc</option> 
    <option value="4">ddd</option> 
    <option value="5">eee</option> 
</select> 

=== === UPDATE
はまた、私jsfiddleを参照してください。

Answer 2

あなたは、スペースの代わりに

  

を試してみましたか？

Answer 3

お試しください。&nbsp;

Answer 4

optionテキストから空白文字を削除するブラウザの動作です。私はinnerHTMLが「保存されている」ことを知っています。したがって、HTMLを通常のスペースにそのまま維持して、このJSを追加することができます：

window.onload = function() { 
    var dropDownLists = document.getElementsByTagName("select"); 
    for (var i = 0; i < dropDownLists.length; i++) { 
     var oDDL = dropDownLists[i]; 
     for (var j = 0; j < oDDL.options.length; j++) { 
      oDDL.options[j].innerHTML = oDDL.options[j].innerHTML.replace(/ /g, "&nbsp;"); 
     } 
    } 
}; 

これは、HTMLエンティティのスペースを置き換えます。

Live test case。