1

所以我试图放置两个内联下拉列表。我测试过，它在 Chrome 和 Firefox 中运行良好，但 IE9（当然）不喜欢它。它将第二个下拉列表放在第一个下拉列表的正下方。这是我的 html 和 css 的样子：

HTML：

<div id="region-path">
    <div id="region-dropdown">
            <!-- <form name="regionform" action=""> -->
            <form action="">
                    <!-- <select id="regionselection" > -->
                    <select id="regionDropDown">
                        <option value="0" selected="selected">All Regions</option>
                        @foreach (var region in Model.RegionData)
                        {
                            <option value="@region.regionID"> @region.regionName</option>
                        }
                    </select>
                    <!-- <input type="button" id="submitButton" value="Submit" /> -->
            </form>
     </div>

    <div id="path-dropdown">
        <form action="">
            <select>
                <option value="0" selected="selected">All Paths</option>
            </select>
        </form>
    </div>
</div>

CSS：

#region-path 
{
    margin: 20px 35px;
}

#region-dropdown, #path-dropdown
{
    display: inline-block;    
    width: 160px;
}

#path-dropdown
{
    margin-left: 20px;
}

我怎样才能解决这个问题？我对 Web 开发非常陌生，因此请指出我是否也做错了其他事情。

4

2 回答 2

1

我不得不玩了一下，最后修复了它：

#region-path 
{
    position: relative;
    margin: 20px 35px;
    width: 320px;
    height: 20px;
}

#region-dropdown, #path-dropdown
{
    position: absolute;
    display: inline;   
    width: 90px;
    height: 19px;
}

#path-dropdown
{
    left: 100px;
}
于 2012-06-15T16:08:49.717 回答
0

只要 IE 不在 IE9 兼容模式下，它就可以在 IE9 中正确显示。

问题在于 IE7（就本问题而言，与 IE9 兼容模式相同）不理解inline-block. display您可以使用display:inlinewith layout 技巧来解决此问题。

display:inline-block; /* for browsers that don't suck */
*display:inline; /* ignored by most browsers except IE7 */
zoom:1; /* you can't set dimensions on an inline element in IE<7, which is to be expected, UNLESS it has layout. zoom will do this */

结果是兼容的浏览器将inline-block正确地看到和显示，其中 IE7 将看到一个内联元素，但由于它有布局，你可以给它一个高度或宽度。

这是一个功能示例。使用开发人员工具栏切换不同的模式，您应该会看到它可以正常工作。http://jsfiddle.net/7uSbR/1/

于 2012-06-15T01:17:29.627 回答