html - 水平滚动 - 白色间隙问题

Question

我目前正在编写水平站点的代码，我遇到的唯一问题是 div 之间的空白。我已经尝试为所有 div 添加 0 填充和边距，但它仍然无法正常工作。有人知道问题出在哪里吗？

这是我的问题的一个简单示例:

https://codepen.io/Omgyouwould/pen/RZeegP

* {
  padding: 0;
  margin: 0;
}

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

.main_wrap {
  height: 100%;
  width: 100%;
  white-space: nowrap;
  overflow-y: hidden;
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100%;
  width: 100%;
  display: inline-block;
  color: white;
  padding: 30px;
}

/* colors */

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

<div class="main_wrap">
  <div class="wrapper green">
    <h1>Hello there.</h1>
    </br>
    <p>Use the botton scroll bar to navigate.</p>
  </div>
  <div class="wrapper blue">
    <h1>Hello there.</h1>
    </br>
    <p>Use the botton scroll bar to navigate.</p>
  </div>
  <div class="wrapper red">
    <h1>Hello there.</h1>
    </br>
    <p>Use the botton scroll bar to navigate.</p>
  </div>
</div>

Answer 1

这似乎是内联 block 的常见问题，概述了一些替代方案/解决方法 here .添加负边距效果很好，但这在某些较旧的浏览器 (IE 6/7) 上不起作用。