Question

所以当我在“display：inline-block”周围包装p：selectOneMenu，并尝试单击下拉框列表时，列表不会下拉。这只发生在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>

我的layout.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中，好吧，IE6 / 7中不支持inline-block，也许它只是与{{1的CSS'的IE8特定冲突}}。想想haslayout错误。

另见：

Center a div in CSS

p：在IE 8上的“display：inline-block”环绕时出现selectOneMenu错误

1 个答案:

另见：