在Internet Explorer中垂直显示下拉列表

Question

我正在调试我的应用程序，因为某些原因，下拉列表有垂直显示而不是水平显示的趋势。

说我有几行代码：

@model MagicAdmin2.Utility.PageFilters.CardSetFilter 

@using (Html.BeginForm()) 
{ 
    <div id="filters" class="blackBorder defaultBaseStyle whiteField" style="margin-top: 20px"> 
     <h3 style="background: white; margin-top: -20px; margin-left: 10px; padding: 0 10px; width: 50px;">Filters</h3> 
     Category: @Html.DropDownListFor(_item => _item.mCategory, Model.mCategoryList, new { disabled = "disabled", @id = "setCategory"}) 
     Block: @Html.DropDownListFor(_item => _item.mBlock, Model.mBlockList, "All", new {@id = "setBlock"}) 
     Cards Loaded:@Html.DropDownListFor(_item => _item.mHasCards, Model.mHasCardsList, new {@id = "setLoaded"}) 
     <input type="button" value="Search" id="fetchButton" onclick="needToConfirm=false"/> 
    </div> 
} 

我会告诉股利的三个主要类别，以避免在CSS的困惑：

.blackBorder { 
    border: 2px solid black; 
} 

.defaultBaseStyle { 
    -ms-border-radius: 10px; 
    border-radius: 10px; 
    padding: 5px; 
} 

.whiteField { 
    background-color: white; 
} 

而且在Internet Explorer中的脚本我已经尝试了以下内容：

#filters ul li { 
    display: inline-block; 
    float: left 
} 

基于几个答案我在这里和那里找到堆栈verflow。不过，目前我没有任何运气。下面是我如何检查Internet Explorer浏览器：

<!--[if IE]> 
      <link rel="stylesheet" title="text/css" href="/Content/IEStyle.css"/> 
     <![endif]--> 

**编辑**

这里的局部视图的快速HTML输出呈现：

<h2>Cards Display Results</h2> 
<br/> 

<form action="/Card/DisplayCardsResults" method="post"> <div id="filters"class="blackBorder defaultBaseStyle whiteField" style="margin-top: 20px"> 
     <h3 style="background: white; margin-top: -20px; margin-left: 10px; padding: 0 10px; width: 50px;">Filters</h3> 
     Filter by card name: <input id="cardNameFilter" name="mCardName" type="text" value="" /> 
     set: <select class="dropdownList" id="cardSetFilter" name="CardSet"><option value="All">All</option> 
<option value="Khans of Tarkir">Khans of Tarkir</option> 
<option value="Magic 2015 Core Set">Magic 2015 Core Set</option> 
<option value="Magic: The Gathering—Conspiracy">Magic: The Gathering—Conspiracy</option> 
<option value="Journey into Nyx">Journey into Nyx</option> 
<option value="Born of the Gods">Born of the Gods</option> 
<option value="Commander 2013 Edition">Commander 2013 Edition</option> 
<option value="Theros">Theros</option> 
<option value="Magic 2014 Core Set">Magic 2014 Core Set</option> 
<option value="Modern Masters">Modern Masters</option> 
<option value="Dragon&#39;s Maze">Dragon&#39;s Maze</option> 
<option value="Gatecrash">Gatecrash</option> 
<option value="Commander&#39;s Arsenal">Commander&#39;s Arsenal</option> 
<option value="Return to Ravnica">Return to Ravnica</option> 
<option value="Magic 2013">Magic 2013</option> 
<option value="Planechase 2012 Edition">Planechase 2012 Edition</option> 
<option value="Avacyn Restored">Avacyn Restored</option> 
<option value="Dark Ascension">Dark Ascension</option> 
<option value="Innistrad">Innistrad</option> 
<option value="Magic 2012">Magic 2012</option> 
<option value="New Phyrexia">New Phyrexia</option> 
<option value="Mirrodin Besieged">Mirrodin Besieged</option> 
<option value="Scars of Mirrodin">Scars of Mirrodin</option> 
<option value="Magic 2011">Magic 2011</option> 
<option value="Rise of the Eldrazi">Rise of the Eldrazi</option> 
<option value="Worldwake">Worldwake</option> 
<option value="Zendikar">Zendikar</option> 
<option value="Planechase">Planechase</option> 
<option value="Magic 2010">Magic 2010</option> 
<option value="Alara Reborn">Alara Reborn</option> 
<option value="Conflux">Conflux</option> 
<option value="Shards of Alara">Shards of Alara</option> 
<option value="Eventide">Eventide</option> 
<option value="Shadowmoor">Shadowmoor</option> 
<option value="Morningtide">Morningtide</option> 
<option value="Lorwyn">Lorwyn</option> 
<option value="Tenth Edition">Tenth Edition</option> 
<option value="Future Sight">Future Sight</option> 
<option value="Planar Chaos">Planar Chaos</option> 
<option value="Time Spiral">Time Spiral</option> 
<option value="Coldsnap">Coldsnap</option> 
<option value="Dissension">Dissension</option> 
<option value="Guildpact">Guildpact</option> 
<option value="Ravnica: City of Guilds">Ravnica: City of Guilds</option> 
<option value="Ninth Edition">Ninth Edition</option> 
<option value="Saviors of Kamigawa">Saviors of Kamigawa</option> 
<option value="Betrayers of Kamigawa">Betrayers of Kamigawa</option> 
<option value="Champions of Kamigawa">Champions of Kamigawa</option> 
<option value="Fifth Dawn">Fifth Dawn</option> 
<option value="Mirrodin">Mirrodin</option> 
<option value="Eighth Edition">Eighth Edition</option> 
<option value="Scourge">Scourge</option> 
<option value="Legions">Legions</option> 
<option value="Darksteel">Darksteel</option> 
<option value="Onslaught">Onslaught</option> 
<option value="Judgment">Judgment</option> 
<option value="Torment">Torment</option> 
<option value="Odyssey">Odyssey</option> 
<option value="Apocalypse">Apocalypse</option> 
<option value="Seventh Edition">Seventh Edition</option> 
<option value="Planeshift">Planeshift</option> 
<option value="Invasion">Invasion</option> 
<option value="Prophecy">Prophecy</option> 
<option value="Nemesis">Nemesis</option> 
<option value="Mercadian Masques">Mercadian Masques</option> 
<option value="Urza&#39;s Destiny">Urza&#39;s Destiny</option> 
<option value="Classic Sixth Edition">Classic Sixth Edition</option> 
<option value="Urza&#39;s Legacy">Urza&#39;s Legacy</option> 
<option value="Urza&#39;s Saga">Urza&#39;s Saga</option> 
<option value="Exodus">Exodus</option> 
<option value="Stronghold">Stronghold</option> 
<option value="Tempest">Tempest</option> 
<option value="Weatherlight">Weatherlight</option> 
<option value="Fifth Edition">Fifth Edition</option> 
<option value="Visions">Visions</option> 
<option value="Mirage">Mirage</option> 
<option value="Alliances">Alliances</option> 
<option value="Homelands">Homelands</option> 
<option value="Ice Age">Ice Age</option> 
<option value="Fourth Edition">Fourth Edition</option> 
<option value="Fallen Empires">Fallen Empires</option> 
<option value="The Dark">The Dark</option> 
<option value="Legends">Legends</option> 
<option value="Revised Edition">Revised Edition</option> 
<option value="Antiquities">Antiquities</option> 
<option value="Unlimited Edition">Unlimited Edition</option> 
<option value="Arabian Nights">Arabian Nights</option> 
<option value="Limited Edition Beta">Limited Edition Beta</option> 
<option value="Limited Edition Alpha">Limited Edition Alpha</option> 
</select> 
     rarity: <select class="dropdownList" id="cardRarityFilter" name="mRarity"><option value="All">All</option> 
<option value="L">Land</option> 
<option value="C">Common</option> 
<option value="U">Uncommon</option> 
<option value="R">Rare</option> 
<option value="M">Mythic Rare</option> 
</select> 
     type: <select class="dropdownList" id="cardTypeFilter" name="mType"><option value="All">All</option> 
<option value="Artifact">Artifact</option> 
<option value="Instant">Instant</option> 
<option value="Creature">Creature</option> 
<option value="Land">Land</option> 
<option value="Planeswalker">Planeswalker</option> 
<option value="Enchantment">Enchantment</option> 
<option value="Sorcery">Sorcery</option> 
</select> 
     color: <select class="dropdownList" id="cardColorFilter" name="mColor"><option value="All">All</option> 
<option value="W">White</option> 
<option value="R">Red</option> 
<option value="G">Green</option> 
<option value="U">Blue</option> 
<option value="B">Black</option> 
<option value="O">Gold</option> 
<option value="N">Colorless</option> 
</select> 
     <input type="button" value="Search" id="fetchButton" onclick="needToConfirm=false"/> 
     <div class="clear"></div> 
    </div> 
</form> 

Answer 1

我没有实际测试这还没有在IE11中，但我认为主要问题是你的CSS这里并没有实际针对任何东西，

#filters ul li { 
    display: inline-block; 
    float: left 
} 

我认为*你的意思做的是这样的：

#filters select { 
    display: inline-block; 
    float: left 
} 

我参加了一个稍微不同的方法对HTML/CSS，所以我可以让事情更简单：http://jsfiddle.net/oneeezy/L8wvcppb/1/

让我知道如果有效的话。