網站在Firefox中工作，但不在鉻或Safari瀏覽器中。導航行在chrome和safari中沒有正確排列

下面是我的網站的代碼。它在Firefox上完美工作，但不是在鉻或Safari瀏覽器。唯一不起作用的是導航行顯示在標題圖片的右側，主頁按鈕是標題圖片的全長。我認爲它與顯示有關：在css中內聯，但我很確定。網站在Firefox中工作，但不在鉻或Safari瀏覽器中。導航行在chrome和safari中沒有正確排列

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

來源

2012-09-07 Johnny Cox

每個表格行必須具有相同的列數。如果你不這樣做，你需要一個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>

，並添加相同的合併單元格的最後一行：

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

更一般地，使用表格佈局這樣是不好的做法時下。如果你搜索谷歌的「CSS佈局vs表」，你可以找到更多關於它。

來源

2012-09-07 06:03:28 mikel

我把colspan更改爲7，擺脫了div，但這只是讓事情變得更糟。一切都變成了不同的大小，並散佈在各地。一旦我解決了這個問題，我會研究CSS佈局，並嘗試修復，但現在我需要至少得到這個固定。 –

我想通了......我需要將colspan添加到底欄。 –

使用a validator。您的HTML無效，至少有一個錯誤會導致不同瀏覽器錯誤從中恢復的差異。

有些會移動<div>這是<table>的子元素，因此它在表格之外（因爲它不允許在那裏）。

您沒有任何表格數據，因此請刪除所有表格標記並使用更合適的內容（例如列表中的鏈接列表等）。

來源

2012-09-07 06:03:19 Quentin

無效標記無DOCTYPE聲明。通過複製/粘貼w3c validator檢查你的代碼檢查錯誤。

來源

2012-09-07 06:13:34

網站在Firefox中工作，但不在鉻或Safari瀏覽器中。導航行在chrome和safari中沒有正確排列

回答

相關問題