Не может получитьвнутри таблицы, чтобы выглядеть одинаково в разных версиях IE - PullRequest
Новая
       24

Не может получитьвнутри таблицы, чтобы выглядеть одинаково в разных версиях IE

3 голосов
/ 13 января 2012

У меня есть небольшой фрагмент кода, который создает раскрывающийся список 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, вызывая больше проблем, чем решает. Любое решение, пожалуйста? Кстати, Firefox всегда отлично выглядит.

Ответы [ 4 ]

2 голосов
/ 13 января 2012

В IE8 / 9 это выглядит плохо, потому что <p:selectOneMenu> генерирует <div>, свойство отображения которого установлено в inline-block классом ui-selectonemenu. Поскольку IE6 / 7 не поддерживает это свойство отображения и по умолчанию использует отображение элемента по умолчанию (которое составляет block для <div>), оно хорошо выглядит в IE6 / 7. Несмотря на то, что IE8 / 9 поддерживает inline-block, он хорошо работает только с элементами, которые по умолчанию inline, но <div> по умолчанию block, так что это наносит ущерб позиционированию.

Конкретная проблема в IE8 / 9 при использовании inline-block для элементов, которые по умолчанию block, заключается в том, что базовая линия совершенно неверна. Это было установлено для текстового содержимого элемента вместо самого элемента. В вашем конкретном случае нижняя строка текста «Выбрать один» была установлена ​​в середине ячейки таблицы, а не в середине самого элемента. Итак, вертикальное выравнивание выглядит плохо. Один из способов исправить это - установить вертикальное выравнивание на top вместо (по умолчанию) baseline.

Итак, чтобы решить эту проблему, я бы предложил переопределить стиль по умолчанию <p:selectOneMenu> внутри <td> следующим образом в вашей пользовательской таблице стилей, которую вы загружаете на <h:outputStylesheet>: 

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

В качестве альтернативы можно установить для свойства отображения значение block: 

td .ui-selectonemenu {
    display: block;
}

Так как он полностью содержится внутри <td>, в других браузерах он не будет иметь каких-либо значительных побочных эффектов.

1 голос
/ 13 января 2012

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

проверить этот сценарий парней.Это совершенно потрясающе и помогло мне 100 раз.Этот скрипт на самом деле даст вам селекторы CSS для каждого браузера или операционной системы, и его легко использовать.Если это не вариант, я бы предложил использовать дочерние селекторы, поскольку ie7 и ниже не поддерживают их.Вы можете узнать больше о них здесь.http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer также очень полезный ресурс.надеюсь, что это поможет.

0 голосов
/ 24 декабря 2016

Это упрощенная форма кода, сгенерированного <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 (режим предприятия выключен), он портит базовую линию метки для «выбранного элемента».

Для правильной работы базовой линии здесь есть 2 варианта:

  1. Измените свойство overflow на visible на label.field,
  2. или измените display на inline.

ВыборВторой вариант имеет побочный эффект:

при inline, верхний и нижний отступы содержащего элемента div внезапно кажутся проигнорированными.Принимая это во внимание, первый вариант, вероятно, является лучшим.

Также, когда вы делаете это для переопределения простых лиц, вы, вероятно, захотите установить это следующим образом: 

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

!important модификатор атрибута гарантирует, что таблица стилей PrimeFaces не переопределит его снова.Это необходимо, потому что PrimeFaces применяется после применения всех <h:head> таблиц стилей.

0 голосов
/ 13 июня 2014

Просто будьте осторожны, используя h: panelGrid (генерирует tr и td), если вы работаете над проектом, который использует 508-совместимое программное обеспечение.Он любит TR и TD только для реальных таблиц.В противном случае ему нравится h: panelGroup, который генерирует div.

Я вижу h: panelGroup во многих примерах PrimeFaces.Соответствие требованиям 508 имеет большое значение, особенно во всех программах, заключенных с правительством.

...