0

我是 HTML 和 CSS 的新手。在我的 CSS 文件中，我有以下内容：

html {
 border-top: 4px solid #000000;
 border-bottom: 4px solid #000000;
 border-left: 4px solid #000000;
 border-right: 4px solid #000000;
 margin:0;
 padding:0;
}

body {
 background: #ffffff;
 color: #000000;
 line-height: 50px;
 font-size: 20px;
 font-family: serif;
 margin: 0 auto;
 padding: 15px 0;
}

.bot-img {
    position: relative;
    bottom: 0px;
}

当我在 Chrome 中打开页面时，它看起来没问题 - 像这样：

铬合金

当我在 Firefox 中打开页面时，它看起来像这样：

在此处输入图像描述

我将如何使两者匹配？

编辑：

这是 HTML 的样子：

<html>
    <head>
        {% load staticfiles %}      
        <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
        <title>TheTitle</title>
    </head>

    <body>
        {% load flatpages %}
            {% get_flatpages as flatpages %}
            {% for flatpage in flatpages %}
        <img class="bot-img"  src="{% static 'img/bottomband.jpg' %}"/>
    </body>
</html>

我正在使用 Django 1.5（和 MySQL）作为后端来开发它。

4

1 回答 1

0

如果您希望它跨越整个 html 视图，则应将以下内容添加到您的 CSS

html {
  height: 100%;
  width: 100%;
}

另外，我建议您将边框代码重构为以下内容：

html {
  border: 4px solid #000000;
}

这只是防止您不得不重复四次相同的代码行。

希望这可以帮助。

于 2013-09-15T15:49:12.753 回答