0

以下は私のウェブサイトの私のコードです。Firefoxでは完全に機能しますが、クロムやサファリでは機能しません。動作しないのは、ナビゲーション行がヘッダー画像の右側に表示され、ホームボタンがヘッダー画像の全長であるということだけです。私はそれがcssのdisplay：inlineと関係があると思いますが、私は確かに注意します。

<html>
    <head>
        <title>Workouts</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
    <div id = "page">
            <table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
            <div id = "header">
                <tr>
                    <td>
                        <img src =images/header_logo2.png />
                    </td>
                </tr>
            </div>
                <tr class = "nav" height="30px" width="100%">
                    <td></td>
                    <td><a href="index.html">Home</a></td>
                    <td><a href="about.html">About</a></td>
                    <td><a href="workouts.html">Workouts</a></td>
                    <td><a href="trainers.html">Trainers</a></td>
                    <td><a href="contact.html">Contact</a></td>
                    <td></td>


                </tr>
                <tr class = "content" width="100%">
                    <td><img  width="100%" src="images/content.png" /></td>
                </tr>
            </table>
    </div>
    </body>
</html>

これは私のスタイルシートです

* {
    margin-top:0;
    padding-top:0;
    padding-bottom: 0;
    margin-bottom: 0;
}
body{
    background:pink;
}
.border{
    background-color: #c92f51;
}
.nav a{
    text-decoration: none;
    color:pink;
}
.nav a:hover{
    color:gray;
}
.nav td{
    display: inline-table;
    width: 14.29%;
    height="30px";
    text-align: center;
    font-size: 24px;
    color:pink;

}
tr .content{
    background:#c92f51;
}
.content td{
    background:white;
    padding: 30px 30px 30px 30px;
}
4

3 に答える 3

2

DOCTYPE宣言なしの無効なマークアップ。w3cバリデーターでコピー/貼り付けしてコードを確認し、エラーを確認します。

于 2012-09-07T06:13:34.020 に答える
1

バリデーターを使用します。HTMLが無効であり、エラーの少なくとも1つにより、さまざまなブラウザのエラーがHTMLから回復する方法に大きな違いが生じます。

<div>の子要素であるをテーブルの外に移動するものも<table>あります（そこでは許可されていないため）。

そこには表形式のデータがないため、すべてのテーブルマークアップを削除し、より適切なものを使用します（たとえば、リンクのリストのリストなど）。

于 2012-09-07T06:03:19.177 に答える
1

すべてのテーブル行には、同じ数の列が必要です。そうでない場合は、colspanそれを補うための属性が必要です。

また<div>、テーブルの代わりにタグを直接持つべきではありません。ブラウザがこれらのタイプのエラーを処理する方法はあまり一貫していないため、修正するのが最善です。変更してみてください：

<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
            <div id = "header">
                <tr>
                    <td>
                        <img src =images/header_logo2.png />
                    </td>
                </tr>
            </div>

に

<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">

            <tr id = "header">
                <td colspan="7">
                    <img src =images/header_logo2.png />
                </td>
            </tr>

また、最後の行に同じcolspanを追加します。

<tr class = "content" width="100%">
                    <td colspan=7><img  width="100%" src="images/content.png" /></td>
                </tr>

より一般的には、このようなレイアウトにテーブルを使用することは、最近では適切な方法ではありません。グーグルで「cssレイアウトvsテーブル」を検索すると、それについてもっと多くのことを知ることができます。

于 2012-09-07T06:03:28.583 に答える