p: ошибка selectOneMenu при переносе с помощью «display: inline-block» в 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>

My 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

Для начала, это неправильный способ центрировать блок элементов.

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 с CSS <p:selectOneMenu>.Представьте себе haslayout ошибок.

См. Также:

• Центрирование div в CSS