现代非 Chrome 浏览器中奇怪的居中 CSS 问题？答案

【问题标题】：Odd centering CSS problem in modern non-Chrome browsers?现代非 Chrome 浏览器中奇怪的居中 CSS 问题？
【发布时间】：2023-03-14 14:16:01
【问题描述】：

出于某种原因，我有一个网页，它在 Chrome 中呈现了很棒的东西，但在 FireFox 和 IE 上却完全不同。

效果可以看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;
}

【问题讨论】：

标签： css margin centering

【解决方案1】：

<header> 和 <footer> 标签是新标签 (HTML5)

对于不支持 HTML5 的旧浏览器，只需使用标准 div。

如果您还想继续使用<header> 和<footer>，可以使用以下代码使其适用于不支持 HTML5 标签的浏览器。

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

【讨论】：

好的，我听说可以使用这些没有任何后果。感谢您的帮助！
旧版浏览器不会因为使用 HTML5 标签而吓坏了，它们只是不会应用您为它们准备的任何 CSS。
啊，那是有道理的。这就解释了为什么我注意到居中被抛出了。谢谢！

【解决方案2】：

问题在于 IE 不完全支持（如果有的话）<header> 和 <footer> 标签。我不确定 Firefox 3.x，但这在当前的 Firefox 4 测试版中运行良好。

【讨论】：

【解决方案3】：

去掉标题标签

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

像这样将图片放在内容标签内，同时用一些css将图片居中

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

标签是 HTML5 的一部分，尚未完全支持。

【讨论】：