Question

我已升级到最新版本的Firefox，但这仍然存在。它在Chrome中运行良好。我的水平规则出现在它所属的页面底部附近，而我在Firefox的网页右侧出现了一条1024像素的线条。

HTML5：

＆＃13;

hr {
  height: 2px;
  width: 1000px;
  border-color: #938FEB;
  margin-left: 12px;
  margin-right: 12px;
}
footer {
  background-color: black;
  width: 1024px;
}

＆＃13;

<footer>
  <p/>
  <hr/>
  <p style="text-align:center;"><a href="default.html">Home</a> | <a href="form.html">E-Mail     Form</a> | Calendar |</p>
  <br/>
</footer>

＆＃13;

我不知道造成这种情况的原因。谢谢

Answer 1

您需要更清楚自己想要实现的目标，也请发布jsfiddles，以便我们可以使用或缩进您的代码。

＆＃13;

hr {
  height: 2px;
  width: 1000px;
  border-color: #938FEB;
  margin-left: 12px;
  margin-right: 12px;
}
footer {
  background-color: black;
  width: 1024px;
}

＆＃13;

<footer>
  <p/><!--(Not valid)-->
  <hr/>
  <p style="text-align:center;">
    <a href="default.html">Home</a> | <a href="form.html">E-Mail Form</a> | Calendar |
  </p>
  <br/>
</footer>

＆＃13;

http://jsfiddle.net/25zcvws2/

Answer 2

我认为您不仅要设置精确的px测量值，而且要么使用百分比单位，要么另外使用计算，这两种情况如下所示。这样，您可以通过进行以下更改来使代码响应更快，效率更高。

删除了多余的结束标签
页脚和hr元素的宽度改变（如上所述）
为页脚添加了一种颜色以允许文本元素显示
在css
添加了字体颜色以显示仅用于演示的其他文本（我认为这已被OP遗漏用于演示目的，我刚刚添加了一个）

这可以在下面看到：

hr {
  height: 2px;
  width: calc(100%-24px);
  border-color: #938FEB;
  margin-left: 12px;
  margin-right: 12px;
}
footer {
  background-color: black;
  width: 100%;
  color:red;
}
footer p{
  text-align:center;
}

<footer>
  <hr/>
  <p><a href="default.html">Home</a> | <a href="form.html">E-Mail Form</a> | Calendar |
  </p>
  <br/>
</footer>

HTML5 CSS3：<hr />在Chrome中运行良好。在Firefox中显示在网页右侧

2 个答案: