0

下面是我的网站代码。它可以在 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;
}
4

3 回答 3

2

DOCTYPE未经声明的无效标记。通过在w3c 验证器中复制/粘贴来检查您的代码检查错误。

于 2012-09-07T06:13:34.020 回答
1

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

有些人会移动 the<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 layouts vs tables”，你可以找到更多关于它的信息。

于 2012-09-07T06:03:28.583 回答