3

我创建了一个带有自定义按钮的翻转菜单，可以在 IE 中正确显示，但不能在 Firefox 或 Safari 中正确显示。在 IE 中，菜单在站点顶部无缝显示。在 FF 和 Safari 中，它显示为几行单独的小框。我正在使用 HTML 文件从 CSS 文件中调用样式。这两个文件都将通过 W3C 进行验证。关于如何让它在所有浏览器中正确显示的任何想法？除了没有边框的表格之外，还有更好的方法来显示此菜单吗？下面的 HTML 和 CSS。图片：它应该看起来像 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");
}
4

1 回答 1

1

我强烈建议您停止使用表格，而使用DIVorSPAN标记或 a ULandLI结构。

你的问题是display: inline;线路。内联元素没有大小，因此它们会忽略您的width和height要求。如果您使用表格，只需删除该行。如果您使用其他之一，请考虑display: inline-block;改用？

于 2012-12-14T08:42:47.060 回答