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

Question

我正在为 Internet Explorer 11 及更低版本调试我的应用程序，由于某种原因，下拉列表倾向于垂直显示而不是水平显示。

假设我有这些代码行:

@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>
}

我将展示 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
}

基于我在 stackoverflow 上到处找到的一些答案。但是，到目前为止我没有任何运气。以下是我检查 Internet Explorer 浏览器的方法:

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

** 编辑 **

这是呈现的局部 View 的快速 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/

如果可行，请告诉我。