1

だから私は2つのインラインドロップダウンリストを入れようとしています。私はテストしましたが、ChromeとFirefoxで正常に動作しますが、IE9（もちろん）はそれを好みません。2番目のドロップダウンリストを最初のドロップダウンリストのすぐ下に配置します。これは私の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では正しく表示されます。

inline-block問題は、IE7（この質問の目的では、IE9互換モードと同じ）がを理解しないことにあり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/

于 2012-06-15T01:17:29.627 に答える