Question

我有一小段代码生成PrimeFaces下拉列表p:selectOneMenu，我无法让所有IE看起来都一样。首先，这是代码

<h:form id="myForm">
    <h:panelGrid columns="3" columnClasses=",column,">
        Select Food:
        <p:selectOneMenu id="food" required="true" value="#{viewBean.selectedFood}">
            <f:selectItem itemLabel="Select One" itemValue=""/>
            <f:selectItems value="#{viewBean.foodList}"/>
            <p:ajax update=":myForm:errorFood"/>
        </p:selectOneMenu>
        <p:message id="errorFood" for="food"/>
    </h:panelGrid>
    <p:commandButton value="submit" update="myForm"/>
</h:form>

在IE8中，它看起来像下面那是可怕的。下拉列表未与错误消息对齐。 enter image description here

IE6和IE7看起来都很棒（有一些变化，但下面是我想要的样子） enter image description here

我尝试解决此问题，但将padding-top: 16px;添加到第二列（即包含下拉列表的列），以使下拉列表与IE8上的错误消息对齐。这使IE8看起来正确，但使IE6,7不再对齐。我尝试使用不同的doctype喜欢

<!DOCTYPE html>
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

但没有工作。如果我根本不使用doctype，那么IE6,7,8，下拉对齐错误消息，但由于IE现在在quirk mode，导致更多问题然后它解决了。有解决方案吗？ BTW firefox总是看起来很棒。

Answer 1

在IE8 / 9中看起来很糟糕，因为<p:selectOneMenu>会生成一个<div>，inline-block类的显示属性设置为ui-selectonemenu。由于IE6 / 7不支持此显示属性并默认为元素的默认显示（block为<div>），因此在IE6 / 7中看起来不错。尽管IE8 / 9支持inline-block，但它仅适用于默认 inline的元素，但<div>默认为block ，所以它在定位上受到严重破坏。

在默认情况下inline-block的元素上使用block时，IE8 / 9中的具体问题是基线完全错误。它被设置为元素的文本内容而不是元素本身。在您的特定情况下，文本“Select One”的底线设置为表格单元格的中间，而不是元素本身的中间位置。因此，垂直对齐看起来很糟糕。解决此问题的方法之一是将垂直对齐设置为top而不是（默认）baseline。

因此，要解决此问题，我建议在<p:selectOneMenu>内覆盖默认样式<td>，并在<h:outputStylesheet>加载的自定义样式表中添加以下内容：< / p>

td .ui-selectonemenu {
    vertical-align: top;
}

另一种方法是将display属性设置为block：

td .ui-selectonemenu {
    display: block;
}

因为它完全包含在<td>内，所以在其他浏览器中不会有任何明显的副作用。

Answer 2

http://rafael.adm.br/css_browser_selector/

看看这个家伙的脚本。它非常棒，帮助了我100倍。这个脚本实际上会为每个浏览器或操作系统提供css选择器，并且易于使用。如果这不是一个选项，我会建议使用子选择器，因为ie7及以下不支持它们。你可以在这里了解更多。 http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer 也是一个非常有用的资源。希望有所帮助。

Answer 3

如果您正在使用使用508兼容软件的项目，请小心使用h：panelGrid（生成tr和td）。它只适用于真实桌子的tr和td。否则，它喜欢h：panelGroup，它生成div。

我在很多PrimeFaces示例中看到了h：panelGroup。 508合规是一个大问题，特别是在与政府签订的所有计划中。

Answer 4

这是<p:selectOneMenu>：

生成的代码的简化形式

<div class="toolbar">
<label>Label:</label>
<div class="menu">
<label class="field">Selected Item</label>
</div>
</div>

使用以下CSS，稍微修改了框的可见性：

div {
    border:1px solid red;
    padding:4px;
}
div.menu {
    display:inline-block;
}
label.field {
  display: block;
  border: 1px dashed blue;
  padding: 4px;
  box-shadow: inset 0 2px 2px #8f8f8f;
  overflow: hidden;
}

在Safari中很顺利，但在Firefox和IE11（企业模式关闭）中，它会混淆＆＃34;选择项目＆＃34;的标签基线。

为了使基线正常工作，这里有两个选项：

将overflow属性更改为visible上的label.field，
或将display更改为inline。

选择第二个选项有副作用：

inline，包含div元素的顶部和底部填充突然被忽略。考虑到这一点，第一种选择可能是更好的选择。

此外，当为primefaces覆盖执行此操作时，您可能希望将其设置如下：

  label.ui-selectonemenu-label {
    overflow: visible !important;
  }

属性上的!important修饰符可确保PrimeFaces样式表不会再次覆盖它。这是必需的，因为在应用所有<h:head>样式表后应用PrimeFaces。

无法在表格中获取<p：selectonemenu>在不同的IE版本中看起来相同</p：selectonemenu>

4 个答案: