如何使多个内联下拉列表跨平台兼容？

Question

因此，我试图放置两个内联下拉列表。我测试过，它在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;
}

我怎么才能解决这个问题？我是非常新的网页开发，所以指出如果我做了其他的错误也。

Answer 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;
}

Answer 2

它正确地出现在IE9中，只要IE不处于IE9兼容模式。

问题在于IE7 (为了这个问题的目的，它与IE9兼容性模式相同)不理解inline-block for display。您可以使用display:inline和布局技巧来解决这个问题。

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/