在现代非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问题？

回答

相关问题