在現代非Chrome瀏覽器中奇怪的居中CSS問題？

出於某種原因，我有這個網頁在Chrome中表現出色，但在FireFox和IE上完全不同。在現代非Chrome瀏覽器中奇怪的居中CSS問題？

效果可能會出現here。

其他瀏覽器似乎刪除我的邊距，以我的header和footer元素爲中心。

是否有一個特定的原因，這只是在Chrome中工作？

這裏是我的HTML：

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>TileTabs</title> 

    <link rel="shortcut icon" type="image/x-icon" href="images/favicon/favicon.ico"> 
    <link rel="stylesheet" href="css/v2.css" type="text/css"> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css"> 
    <link rel="stylesheet" href="css/veramono.css" type="text/css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script> 
    <script src="js/tile_interaction.js"></script> 
</head> 
<body> 
    <header> 
     <img src="images/logo/logo_v3.png" alt="logo" /> 
    </header> 

    <div id="content"> 
     <ul> 
      <li> 
       <div class="tile"> 
       </div> 
      </li> 
      <li> 
       <div class="tile"> 
       </div> 
      </li> 
      <li> 
       <div class="tile"> 
       </div> 
      </li> 
      <li> 
       <div class="tile"> 
       </div> 
      </li> 
      <li> 
       <div class="tile"> 
       </div> 
      </li> 
      <li> 
       <div class="tile"> 
       </div> 
      </li> 
      <li> 
       <div class="tile"> 
       </div> 
      </li> 
      <li> 
       <div class="tile"> 
       </div> 
      </li> 
      <li> 
       <div class="tile"> 
       </div> 
      </li> 
      <li> 
       <div class="tile"> 
       </div> 
      </li> 
     </ul> 
    </div> 

    <footer> 
     <a class="emailus" href="index.htm">Home</a> | <a class="emailus" href="about.htm">About</a> | <a class="emailus" href="contact.htm">Contact</a> 
    </footer> 
</body> 
</html>

CSS：

body { 
    background: #F6F6F6; 
    font-family: 'BitstreamVeraSansMonoRoman', 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif; 
    margin: 0; 
} 

a:link, a:visited, a:hover, a:active { 
    color: white; 
    text-decoration: none; 
} 

header { 
    width: 920px; 
    background: #999; 
    margin: 0px auto; 
    text-align: center; 

    -webkit-border-top-left-radius: 20px; 
    -webkit-border-top-right-radius: 20px; 
    -moz-border-radius-topleft: 20px; 
    -moz-border-radius-topright: 20px; 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 


} 

#content { 
    width: 920px; 
    height: 760px; 
    background: #999; 
    margin: 0px auto; 
} 

footer { 
    width: 920px; 
    background: #999; 
    margin: 0px auto; 
    text-align: center; 
    padding-top: 10px; 
    padding-bottom: 10px; 

    -webkit-border-bottom-right-radius: 20px; 
    -webkit-border-bottom-left-radius: 20px; 
    -moz-border-radius-bottomright: 20px; 
    -moz-border-radius-bottomleft: 20px; 
    border-bottom-right-radius: 20px; 
    border-bottom-left-radius: 20px;  
} 

li { 
    float: left; 
    list-style: none; 
    padding: 34px; 
} 

.tile { 
    cursor: pointer; 
    background: red; 
    border: 2px solid #000; 
    width: 100px; 
    height: 100px; 
}

來源

2011-01-20 Qcom

擺脫標題標籤

<-- <header> --!> 
<-- </header> --!>

，並放置內容標籤內的圖片，像這樣，還用一些css中心圖片

<div id="content"> 
     <img src="images/logo/logo_v3.png" alt="logo" /> 
     <ul> 
      ...

標籤是尚未完全支持的HTML5的一部分。

來源

2011-01-20 01:27:30 Bnjmn

的<header>和<footer>標籤是新的（HTML5）

對於不支持HTML5只需使用標準的div舊版瀏覽器。

如果您還想使用<header>和<footer>，則可以使用以下代碼使其適用於不支持HTML5標記的瀏覽器。

<script> 
document.createElement('header'); 
document.createElement('footer'); 
</script>

來源

2011-01-20 01:29:43 DaiYoukai

好的，我聽說可以毫無後果地使用它們。謝謝您的幫助！ – Qcom 2011-01-20 01:31:38

的問題是，IE瀏覽器不能完全支持（如果有的話）的<header>和<footer>標籤。我不確定Firefox 3.x是什麼，但是在目前的Firefox 4測試版中可以正常工作。

來源

2011-01-20 01:31:33 Herohtar

在現代非Chrome瀏覽器中奇怪的居中CSS問題？

回答

相關問題