最近のChrome以外のブラウザでは、奇数センタリングCSSの問題がありますか？

何らかの理由で、私はChromeで素晴らしいものをレンダリングするこの1つのWebページを持っていますが、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だけで、標準のdivを使用してサポートしていない古いブラウザについて

（HTML5）新しく追加されました。

<header>と<footer>を使用する場合は、次のコードを使用して、HTML5タグをサポートしていないブラウザでも動作させることができます。

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

出典

2011-01-20 01:29:43 DaiYoukai

OK、これらは結果なしで使用することができたと聞きました。助けてくれてありがとう！ – Qcom

古いブラウザではHTML5タグを使用してフリークアウトすることはありません。あなたが持っているCSSは適用されません。 – DaiYoukai

ああ、それで意味があります。それがなぜ私がセンタリングが捨てられていることに気づいたのかを説明します。ありがとう！ – Qcom

問題はIEが完全に（すべてであれば）<header>と<footer>タグをサポートしていないということです。私はFirefox 3.xについてはわかりませんが、現在のFirefox 4のベータ版ではうまくいきます。

出典

2011-01-20 01:31:33 Herohtar

最近のChrome以外のブラウザでは、奇数センタリングCSSの問題がありますか？

答えて

関連する問題