的i

的i

关注
发信
关注(28)粉丝(399)

css - IE7上的IceFaces menuBar + menuItem显示错误

寻找一些小的显示错误的帮助。这是在带有IceFaces 2.0.2的JBoss 7.0.2.Final上运行的代码示例：

<!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，想知道它是否有效）。

如果不滚动页面并悬停MENU1，您将看到正确显示了SUBMENU。但是，如果稍微滚动页面以使菜单位于页面顶部，然后将MENU1悬停，则会看到SUBMENU在菜单下显示约50像素。因此，您将永远无法点击第二个菜单...

无法弄清楚为什么这不起作用。我看了http://component-showcase.icefaces.org/component-showcase/showcase.iface上的IceFaces展示柜，发现它确实可以在我的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进行测试吗？

任何帮助将不胜感激。

最佳答案

IceFaces 3纠正了此错误，不再需要任何解决方法。

关于css - IE7上的IceFaces menuBar + menuItem显示错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8492385/

10-15 11:26
Powered by LMLPHP ©2024 的i 0.027800