Question

我是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中打开该页面时，它看起来没问题 - 就像这样：

chrome

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

enter image description here

我如何才能使两者匹配？

修改

这是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）作为后端开发它。

Answer 1

如果您希望它在整个html视图中，您应该将以下内容添加到CSS

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

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

html {
  border: 4px solid #000000;
}

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

希望这有帮助。

HTML中的边框

1 个答案: