即列表中的垂直空间问题

Question

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

更新：添加溢出：隐藏，现在列表项的高度为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

试试这个

border-bottom-width:1px solid red;

Answer 2

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

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