我有四个html元素，按此顺序嵌套：div＆gt; ul＆gt; li>页。 div的背景颜色为黑色。 li元素具有白色的背景颜色。 ul和p没有背景颜色。根据浏览器窗口的大小，div元素的骑行侧显示1或2像素宽的div背景条带。
这是我增加浏览器窗口大小的截屏视频。您可以在顶部选项卡的右侧看到父级背景颜色的黑色线条闪烁。 http://screencast.com/t/wPLq8CJX
有谁知道为什么会发生这种情况以及如何阻止它？
以下是代码：
HTML：
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<html>
<body>
<div id="content-box">
<!-- columns divs, float left, no margin so there is no space between column, width=1/3 -->
<div class="col">
<div id="add-new-post" class="widget">
<div class="tabs">
<ul>
<li id="tab1" class="vh-center"><p>About Us</p></li>
<li id="tab2" class="vh-center"><p>Our Work</p></li>
<li id="tab3" class="vh-center"><p>Contact</p></li>
</ul>
</div>
<div class="tabbed-content-container">
<div id="item1" class="tabbed-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem turpis, convallis sed lobortis et, efficitur at orci. Vivamus a porttitor felis, finibus ultricies lectus. Fusce non urna egestas, euismod nunc non, ullamcorper leo. Praesent tempor ornare quam, ac pharetra sapien. Sed tempor elementum egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed quis leo sed augue ullamcorper lobortis. Fusce varius convallis auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div id="item2" class="tabbed-content">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id dolor ac nisi fringilla porta. Vestibulum luctus velit libero, nec elementum dolor pellentesque id. Curabitur id risus tristique metus gravida cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris convallis orci in condimentum tincidunt. Suspendisse semper ut nibh sit amet condimentum. Donec vehicula venenatis lacinia. Ut nec ullamcorper mauris. Morbi pretium euismod accumsan. Pellentesque laoreet nisi eget eleifend imperdiet. Duis porta libero massa. Integer efficitur, nunc ut placerat vestibulum, ante mauris scelerisque metus, nec dictum lectus mi non arcu.
</div>
<div id="item3" class="tabbed-content">
Phasellus augue mi, imperdiet pharetra risus vel, tincidunt rutrum dolor. Vivamus fringilla enim ut fermentum fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sed risus et magna finibus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi risus libero, cursus vel vestibulum ac, semper at nibh. Vestibulum nisl lorem, finibus et tortor mattis, rhoncus placerat arcu. Aliquam pellentesque felis non nisl eleifend, vel feugiat nisi lobortis. Sed vestibulum tellus ligula, a pretium elit pellentesque hendrerit. Proin iaculis vel dolor faucibus facilisis. Donec porta efficitur lectus vel sagittis.
</div>
</div>
</div>
<div id="action-bar" class="widget">
</div>
<div id="subscribe" class="widget">
</div>
</div>
<div class="col">
<div id="related-posts" class="widget">
</div>
<div id="tags" class="widget">
</div>
<div id="map" class="widget">
</div>
</div>
<div class="col">
<div id="calendar" class="widget">
</div>
<div id="recent-posts" class="widget">
</div>
<div id="categories" class="widget">
</div>
<div id="pop-com-recent" class="widget">
</div>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
CSS：
* {margin:0;padding:0;border:0; box-sizing:border-box;}
html{height:100%;} /*Makes it so that you can specify height as a percentage in elements which have html as an ancestor.*/
body{text-align:center; padding:2%; background:#B8E6E6; height:100%;}
#content-box{display:inline-block; width:100%; height:100%;}
.col{float:left; width:33%; height:600px; min-width: 430px;} /*float all three columns left*/
.widget{margin:40px 30px; background:white;} /*put some space around all the widgets*/
/* first column: */
#add-new-post{height:70%;}
#action-bar{height:10%;}
#subscribe{height:20%;}
/* second column: */
#related-posts{height:40%;}
#tags{height:20%;}
#map{height:40%;}
/* third column: */
#calendar{height:30%;}
#recent-posts{height:10%;}
#categories{height:10%;}
#pop-com-recent{height:20%;}
/* Tabs in the add-new-post widget */
.tabs{float:left; height:100%; width:20%; background:black; color:gray; margin:0;padding:0;border:0;}
.tabs ul {height:100%; list-style:none; width:100%; margin:0;padding:0;border:0;}
.tabs ul li {
margin:0;padding:0;border:0;
width:100%;
min-height:60px;
position:relative;
}
.vh-center {
display:table;
min-height: 60px;
}
.vh-center p {
display: table-cell;
vertical-align: middle;
text-align: center;
min-height: 60px;
}
.tabbed-content-container{
position: relative;
text-align: left;
float:left;
width:80%;
height: 100%;
background: white;
overflow-y:auto;
}
.tabbed-content {
position:absolute;
margin: 10%;
}