CSS 以百分比表示的布局在 Firefox 中显示较小的右边距

Question

我在编写一些脚本时遇到了一些挑战 css；的确，右边距看起来比左边小，而两者都设置为5%！

使用 Firefox 35.0.1

body {
  width: 100%;
  padding: 0;
  margin-top: 5%;
  background: #fff;
}
#main-content {
  float: left;
  width: 57%;
  background: #a7cbd3;
  margin-left: 5%;
  min-height: 777px;
}
#side {
  float: right;
  width: 33%;
  background: #0081a9;
  margin-right: 5%;
  min-height: 777px;
}

<div id="main-content">Main content</div>
<div id="side">Side</div>

请问您的意见？

提前致谢！

Answer 1

您必须重置默认 body 边距以防止内容溢出。

body {
  margin: 5% 0 0; /* added margin-top 5% as previous rule */
}

body {
  width: 100%;
  padding: 0;
  margin: 5% 0 0;
  background: #fff;
  margin: 0;
}
#main-content {
  float: left;
  width: 57%;
  background: #a7cbd3;
  margin-left: 5%;
  min-height: 777px;
}
#side {
  float: right;
  width: 33%;
  background: #0081a9;
  margin-right: 5%;
  min-height: 777px;
}

<html>

<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
  <div id="main-content">Main content</div>
  <div id="side">Side</div>
</body>

</html>

CSS 以百分比表示的布局在 Firefox 中显示较小的右边距

CSS layout in percent shows smaller right margin in Firefox

html

css

layout