Question

我创建了一个带有自定义按钮的翻转菜单，可以在IE中正确显示，但不能在Firefox或Safari中显示。在IE中，菜单在网站顶部无缝显示。在FF和Safari中，它显示为几行单独的小盒子。我正在使用HTML文件从CSS文件中调用样式。两个文件都将使用W3C进行验证。有关如何在所有浏览器中正确显示它的任何想法？除了没有边框的桌子之外，还有更好的方法来显示此菜单吗？下面是HTML和CSS。图片：How it should look like HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>PJD</title>
      <link href="menu1.css" rel="stylesheet" type="text/css">
   </head>
   <body style="background-image:url(/images/GradientBackground.png)">
      <table border='0' cellspacing='0'>
         <tr>
            <th class="PJD_Logo"></th>
            <th class="rollover_New_Client"><a href="PersonalInfo.php" style="display:block;">&nbsp;</a></th>
            <th class="rollover_View_Client"><a href="DisplayInfo.php" style="display:block;">&nbsp;</a></th>
            <th class="rollover_Search_Client"><a href="Search.php" style="display:block;">&nbsp;</a></th>
            <th class="menu_end"></th>
        </tr>
      </table>
    ....
  </body>
</html>

CSS代码：

body {
   color: #e4e4e4;
}

th.PJD_Logo {
   border: 0px;
   display: inline;
   width: 125px;
   height: 48px;
   background-image: url("/images/PJD_Logo.png");
   color: transparent;
}

th.rollover_New_Client {
border: 0px;
display: inline;
width: 125px;
height: 48px;
background-image: url("/images/btn_New_Client.png");
color: transparent;
}

th.rollover_New_Client:hover {
    background-image: url("/images/btn_New_Client_over.png");
}

th.rollover_View_Client {
    border: 0px;
    display: inline;
    width: 125px;
    height: 48px;
    background-image: url("/images/btn_View_Client.png");
}

th.rollover_View_Client:hover {
    background-image: url("/images/btn_View_Client_over.png");
}

th.rollover_Search_Client {
    border: 0px;
    display: inline;
    width: 125px;
    height: 48px;
    background-image: url("/images/btn_Search_Client.png");
}

th.rollover_Search_Client:hover {
    background-image: url("/images/btn_Search_Client_over.png");
}

th.menu_end {
    border: 0px;
    display: inline;
    width: 500px;
    height: 48px;
    background-image: url("/images/menu_end.png");
}

Answer 1

我强烈建议您停止使用表格，而是使用DIV或SPAN标记，或UL和LI结构。

您的问题是display: inline;行。内联元素没有大小，因此会忽略您的width和height要求。如果您使用该表，只需删除该行。如果您使用其中一个，请考虑使用display: inline-block;代替？

翻转菜单在IE中正常显示，但不在Firefox或Safari中显示

1 个答案: