Question

以下是我网站的代码。它在firefox上完美运行，但不适用于chrome或safari。唯一不起作用的是标题图片右侧的导航行显示，主页按钮是标题图片的全长。我认为它与显示有关：在css中内联，但我注意到了。

<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;
}

Answer 1

没有DOCTYPE声明的无效标记。通过复制/粘贴w3c validator检查错误。

Answer 2

使用a validator。您的HTML无效，至少有一个错误导致不同浏览器错误从中恢复的方式存在显着差异。

有些会移动<div> <table>的子元素，因此它位于表格之外（因为不允许在那里）。

您没有任何表格数据，因此请删除所有表格标记并使用更合适的内容（例如，链接列表的列表等）。

Answer 3

每个表行必须具有相同的列数。如果不这样做，则需要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 layouts vs tables”，您可以找到更多关于它的信息。

网站适用于Firefox，但不适用于Chrome或Safari。导航行在chrome和safari中无法正确排列

3 个答案: