css - 即列表中的垂直空间问题

Question

由于所有帖子，我已经修复了垂直间距问题，但我现在的问题是边框，如果我应用边框，列表项的高度为 2 px。

更新：添加溢出：隐藏，现在列表项的高度为 1px 更新：添加了 chrome 的屏幕截图（所需的输出）

ul.lines {
margin: 0px;
padding: 0px;
}
.lines li {
border-bottom: solid red 1px;
list-style: none;
background-color:#00F;
}
.lt-ie9 .lines li {
background-color: #CC0;
font-size: 0px;
line-height: 0px;
height: 0px !important;
overflow: hidden
}


<ul class="lines">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

编辑：我的列表项是故意为空的，它们只有边框，我使用的上下文是条形图上的垂直线。

Answer 1

很难说出你在问什么；但似乎您的抱怨是边框增加了列表项的高度。如果是这种情况，box-sizing: border-box请在列表项上设置。

小提琴：http: //jsfiddle.net/jonathansampson/Z6t6A/

Answer 2

尝试这个

border-bottom-width:1px solid red;