IceFaces menuBar + menuItem ошибка отображения в IE7 - PullRequest
Новая
       45

IceFaces menuBar + menuItem ошибка отображения в IE7

1 голос
/ 13 декабря 2011

Нужна помощь для небольшой ошибки дисплея. Вот пример кода, работающего на JBoss 7.0.2. Финал с IceFaces 2.0.2: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ice="http://www.icesoft.com/icefaces/component">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<style>
  *{margin: 0;padding: 0;font-family: Helvetica, Arial, Verdana ;font-size: 12px;}
  .mainmenubar{width: 100%;height: 32px;background-color: blue;}
  .mainmenubarItem{float: left;height: 27px;border-right: 1px solid white;padding-top: 5px;}
  .mainmenubarItem a, .mainmenubarItem a:hover, .mainmenubarItem a span{color: white;font-size: 16px;font-weight: bold;text-decoration: none;}
  .mainmenubarSubMenu{position: absolute;background-color: #F5F5F5;}
  </style>
</h:head>
<h:body>
  <div style="background-color: grey; width: 100%; height: 50px;" />
    <ice:form id="menuform">
      <ice:menuBar styleClass="mainmenubar" orientation="horizontal">
        <ice:menuItem styleClass="mainmenuitem" id="mainmenu1" onclick="return false;" value="MENU1">
          <ice:menuItem value="SUBMENU1" styleClass="submenuitem" id="submenu1" onclick="return false;" />
          <ice:menuItem value="SUBMENU1" styleClass="submenuitem" id="submenu2" onclick="return false;" />
        </ice:menuItem>
        <ice:menuItem styleClass="mainmenuitem" id="mainmenu2" onclick="return false;" value="MENU2" />
      </ice:menuBar>
    </ice:form>
  <div class="bottom" style="background-color: yellow; width: 100%; height: 1800px;" />
</h:body>
</html>

Кажется, я не могу напрямую загрузить файлы, прикрепленные к этому сообщению, чтобы показать скриншоты. Тем не менее, вы должны иметь возможность скопировать / вставить этот код в любой проект IceFaces с аналогичной конфигурацией, открыть версию IE7 (на самом деле я использую IE8 с активированным режимом «просмотра совместимости», интересно, имеет ли он эффект).

Если вы не прокрутите страницу и не наведете курсор на МЕНЮ1, вы увидите, что SUBMENU отображается правильно. Однако, если вы прокрутите страницу немного, чтобы отобразить меню в верхней части страницы, и наведите курсор мыши на МЕНЮ1, вы увидите, что SUBMENU отображается под меню примерно на 50 пикселей. следовательно, вы никогда не сможете нажать на второе меню ...

Не могу понять, почему это не работает. Я посмотрел на витрину IceFaces на http://component -showcase.icefaces.org / component-showcase / showcase.iface и увидел, что она работает на моей версии IE (не могу подтвердить, что витрина действительно использует та же версия IceFaces, что и у меня).

Я сделал дополнительный тест: локальный код витрины показывает то же поведение (с ошибкой). Вот точный код, который я использую: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ice="http://www.icesoft.com/icefaces/component">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/xmlhttp/css/rime/rime.css" />
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/css/showcase_style.css" />
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/css/showcase_overrides.css" />
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/css/showcase_layout.css" />
</h:head>
<h:body>
   <ice:panelGroup styleClass="componentBox">

     <ice:panelGroup styleClass="synopsisBox menuBarContainer">
       <ice:outputText value="The menuBar component provides a robust menu system." />
       <ice:outputText value="In the box below, choose the orientation of the Menu Bar and then select a menu item. The backing been value of the selected item will be reflected under Server-side Backing Bean Values." />
     </ice:panelGroup>

     <ice:panelGroup styleClass="clearer" />

     <!-- main menu declaration  -->
     <ice:panelGroup styleClass="exampleBox menuBarContainer">
       <ice:menuBar id="menuBar" orientation="horizontal">
         <!-- File menu -->
         <ice:menuItem value="File" id="file" onclick="return false;">
           <ice:menuItem onclick="return false;" id="open" value="Open" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/open.gif"></ice:menuItem>
           <ice:menuItem id="close" value="Close" onclick="return false;"></ice:menuItem>
           <ice:menuItem id="recent" value="Recent" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/recent.gif" onclick="return false;">
             <ice:menuItem id="file1" value="File 1" onclick="return false;"></ice:menuItem>
            <ice:menuItem id="file2" onclick="return false;" value="File 2">
            <ice:menuItem id="para1" onclick="return false;" value="Para 1"></ice:menuItem>
              <ice:menuItem id="para2" value="Para 2" onclick="return false;"></ice:menuItem>
              <ice:menuItem id="para3" value="Para 3" onclick="return false;"></ice:menuItem>
            </ice:menuItem>
            <ice:menuItem value="File 3" id="file3" onclick="return false;"></ice:menuItem>
            <ice:menuItem value="File 4" id="file4" onclick="return false;"></ice:menuItem>
          </ice:menuItem>

          <ice:menuItem id="save" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/save.gif" value="Save" onclick="return false;"></ice:menuItem>
          <ice:menuItemSeparator />
          <ice:menuItem id="print" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/print.gif" value="Print" onclick="return false;"></ice:menuItem>

        </ice:menuItem>

        <!-- Edit menu -->
        <ice:menuItem value="Edit" id="edit" onclick="return false;">
          <ice:menuItem id="cut" value="Cut" onclick="return false;"></ice:menuItem>
          <ice:menuItem id="copy" value="Copy" onclick="return false;"></ice:menuItem>
          <ice:menuItem id="paste" value="Paste" onclick="return false;"></ice:menuItem>
        </ice:menuItem>

        <!-- View menu -->
        <ice:menuItem value="View" id="view" onclick="return false;">
          <ice:menuItem id="zoom_in" value="Zoom In" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/zoomin.gif" onclick="return false;"></ice:menuItem>
          <ice:menuItem id="zoom_out" value="Zoom Out" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/zoomout.gif" onclick="return false;"></ice:menuItem>
          <ice:menuItem id="fit_in_window" value="Fit In Window" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/fitinwindow.gif" onclick="return false;"></ice:menuItem>
          <ice:menuItem id="actual_size" value="Actual Size" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/actualsize.gif" onclick="return false;"></ice:menuItem>
        </ice:menuItem>

        <!-- Help Menu -->
        <ice:menuItem value="Help" id="help" onclick="return false;">
          <ice:menuItem id="docs" value="Documentation" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/help.gif" link="http://www.icefaces.org/main/resources/documentation.iface" target="_blank" />
        </ice:menuItem>

      </ice:menuBar>
    </ice:panelGroup>

    <ice:panelGroup styleClass="clearer" />

  </ice:panelGroup>
  <div style="height: 1800px;width: 100%;" />
</h:body>
</html>

Если кто-то сможет протестировать этот код в IE7 или IE8 с представлением совместимости, чтобы подтвердить ошибочное поведение, это уже поможет.

Мне также интересно, связана ли эта проблема с тем фактом, что мы используем здесь версию IE8 с «представлением совместимости», а не автономный IE7 (отправляет ли IE8 с режимом совместимости заголовки IE8 или IE7 на сервер?). Кто-нибудь может протестировать с автономным IE7?

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 14 сентября 2012

IceFaces 3 исправил эту ошибку, больше нет необходимости в обходном пути.

...