水平滚动 - 白色间隙问题

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

这似乎是内联块的常见问题，概述了一些替代/解决方法here。添加负边距效果不错，但这对某些旧版浏览器（IE 6/7）无效。