网站可以在 Firefox 中运行，但不能在 chrome 或 safari 中运行。导航行在 chrome 和 safari 中未正确排列答案

【问题标题】：Website works in firefox but not in chrome or safari. Navigation row does not line up correctly in chrome and safari网站可以在 Firefox 中运行，但不能在 chrome 或 safari 中运行。导航行在 chrome 和 safari 中未正确排列
【发布时间】：2012-09-07 14:23:25
【问题描述】：

以下是我的网站代码。它可以在 Firefox 上完美运行，但不能在 chrome 或 safari 上运行。唯一不起作用的是标题图片右侧的导航行显示，主页按钮是标题图片的全长。我认为这与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;
}

【问题讨论】：

标签： html css firefox google-chrome safari

【解决方案1】：

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

【讨论】：

【解决方案2】：

每个表格行必须具有相同数量的列。如果你不这样做，你需要一个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>

更一般地说，现在使用这样的表格进行布局并不是一个好习惯。如果您在 Google 上搜索“css 布局与表格”，您可以找到更多相关信息。

【讨论】：

我将 colspan 更改为 7 并摆脱了 div 但这只会让事情变得更糟。一切都变成了不同的大小，散布在各处。一旦我解决了这个问题，我将研究 css 布局并尝试解决这个问题，但现在我至少需要解决这个问题。
我想通了...我还需要将 colspan 添加到底部列。

【解决方案3】：

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

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

你没有任何表格数据，所以去掉所有的表格标记并使用更合适的东西（例如你的链接列表的列表等等）。

【讨论】：