我已经创建了一个带有自定义按钮的鼠标悬停菜单，它可以在 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;"> </a></th>
<th class="rollover_View_Client"><a href="DisplayInfo.php" style="display:block;"> </a></th>
<th class="rollover_Search_Client"><a href="Search.php" style="display:block;"> </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");
}
最佳答案
我强烈建议您停止使用表格，而是使用 DIV 或 SPAN 标签，或者 UL 和 LI 构造。
您的问题是 display: inline; 行。内联元素没有大小，因此它们会忽略您的 width 和 height 要求。如果您使用表格，只需删除该行。如果您使用其中之一，请考虑使用 display: inline-block; 代替？
关于css - 滚动菜单在 IE 中正确显示，但在 Firefox 或 Safari 中不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13873282/