帮助查找 FireFox 中的 CSS 问题答案

【问题标题】：Help finding CSS problem in FireFox帮助查找 FireFox 中的 CSS 问题
【发布时间】：2011-01-14 11:10:33
【问题描述】：

我正在处理的页面包含以下 HTML 标记：

<!DOCTYPE html>

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

    <link rel="stylesheet" href="css/style.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="js/element_sequentials.js"></script>
</head>
<body>
    <header>
        <h1>
            TileTabs.com
        </h1>
    </header>

    <div id="content">
        <ul>
            <li>
                <img src="images/sites/truncated/google_trunc.png" />
            </li>
            <li>
                <img src="images/sites/truncated/google_trunc.png" />
            </li>
            <li>
                <img src="images/sites/truncated/google_trunc.png" />
            </li>
            <li>
                <img src="images/sites/truncated/google_trunc.png" />
            </li>
        </ul>
    </div>

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

style.css：

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

h1 {
    font-size: 100px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    text-shadow: 2px 3px 3px #292929;
    letter-spacing: -1px;
    -webkit-text-stroke: 1px white;
}

a:link, a:visited, a:active, a:hover {
    color: #fff;
    text-shadow: 2px 3px 3px #292929;
    letter-spacing: 2px;
    -webkit-text-stroke: 1px white;
}

header {
    width: 920px;
    background: #666;
    margin: 0px auto;
    margin-top: 0;
    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: 600px;
    background: #666;
    margin: 0px auto;
    text-align: center;
}

footer {
    width: 920px;
    background: #666;
    margin: 0px auto;
    text-align: center;

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

ul {
    padding-top: 20px;
    margin: 0px auto;
}

li {
    float: left;
    list-style: none;
    margin: 0 125px 60px 0;
}

veramano.css：

@font-face {
    font-family: 'BitstreamVeraSansMonoRoman';
    src: url('veramono-webfont.eot');
    src: local('☺'), url('veramono-webfont.woff') format('woff'), url('veramono-webfont.ttf') format('truetype'), url('veramono-webfont.svg#webfonttPkD6dqa') format('svg');
    font-weight: normal;
    font-style: normal;
}

由于某种原因，一切在 FireFox 中看起来都非常糟糕，但在 Chrome 中却不是。我正在运行 Mac OS X，我发现有时很重要。

我正在尝试为你们上传这个直播，对于暂时的不便，我深表歉意。

谢谢！

【问题讨论】：

标签： css firefox google-chrome

【解决方案1】：

通过添加display:block; 修复在页脚的 css 中。

【讨论】：

非常感谢！它可以修复页眉和页脚元素。我敢肯定这是非常基本的，但你能解释一下为什么这是必要的吗？
在 HTML5 中这些类型的元素被称为块级元素，它们需要 display:block