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タグ、またはULandLI構造を使用することを強くお勧めします。

あなたの問題はdisplay: inline;ラインです。インライン要素にはサイズがないため、width要件は無視されますheight。テーブルを使用する場合は、単に行を削除してください。display: inline-block;他のいずれかを使用している場合は、代わりに使用することを検討してください。

于 2012-12-14T08:42:47.060 に答える