水平滚动 - 白色空白问题

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

这似乎是inline-block的一个共同的问题，一些替代品/替代方法概述here。添加负边距工作得不错，但这在一些较旧的浏览器上不起作用（IE 6/7）。