css - p :selectOneMenu error when wrap around by "display: inline-block" on IE 8

Question

因此，当我将 p:selectOneMenu 包裹在“display: inline-block”周围并尝试单击下拉框列表时，该列表不会下拉。这只发生在 INTERNET EXPLORER 8 中(在 IE6、7、firefox 中工作)。这是重现问题的小代码。

<h:head>
    <title>Facelet Title</title>
    <link rel="stylesheet" href="resources/css/layout.css" type="text/css"/>
</h:head>
<h:body>
    <div id="MainWrapper">
        <h:form id="myForm">
            <p:selectOneMenu value="#{viewBean.selectedFood}">
                <f:selectItem itemLabel="Select One" itemValue=""/>
                <f:selectItems value="#{viewBean.foodList}"/>
                <p:ajax update=":myForm:text"/>
            </p:selectOneMenu>
            <br/>
            <h:outputText id="text" value="#{viewBean.selectedFood}"/>
        </h:form>
    </div>
</h:body>

我的布局.css

body{
    text-align: center;
    background-color: #EBEAE3;
    margin: 0;
    font-family: Trebuchet;
}

#MainWrapper{
    display: inline-block;
    width: 1100px;
    background-color: white;
    min-height: 1000px;
    _height: 1000px;     
}

“MainWrapper”的目的是使组件居中。如果我去掉“display: inline-block”，或者使用 h:selectOneMenu，那么一切正常。

Answer 1

首先，这是错误的居中方式block元素。

body{
    text-align: center;
}

#MainWrapper{
    display: inline-block;
    width: 1100px;
}

你需要margin: 0 auto;相反。

#MainWrapper{
    margin: 0 auto;
    width: 1100px;
}

(是的，从 text-align: center; 中删除 body)

至于为什么IE8会出问题，IE6/7不会出问题，嗯，inline-block在 IE6/7 中不受支持，也许这只是 IE8 与 <p:selectOneMenu> 的 CSS 的特定冲突.想到haslayout错误。

另见:

• Center a div in CSS