html - 行内 block 元素之间的空白

Question

我觉得这个问题不应该再存在了，但我似乎找不到解决方案。就这样吧。

ul {
    list-style-type: none;
    width:150px;
}
ul.nav_sub_menu > li {
    width: 100%;
}

ul.nav_sub_menu > li a {
    display: inline-block;

    width: 100%;
    padding: 2.5px 0px 2.5px 5px;

    background: #213059;

    color: white;
    text-decoration: none;

    border-bottom: 5px solid #253767;
}

ul.nav_sub_menu > li a:hover {
    text-decoration: underline;
    background-color: #253767;
}

<div class="nav_sub_menu_wrapper">
	<ul class="nav_sub_menu">
		<li>
			<a href="javascript:void(0)" class="nav_sub_button">About me</a></li><li>
			<a href="javascript:void(0)" class="nav_sub_button">Goals</a></li><li>
			<a href="javascript:void(0)" class="nav_sub_button">Realizations</a></li><li>
			<a href="javascript:void(0)" class="nav_sub_button">Future plans</a></li>
	</ul>
</div>

此示例生成带有 display:inline-block anchor 标记的样式列表您可能从一开始就注意到每个列表项之间由水平白线分隔。如果不是，请尝试放大或缩小浏览器(对我来说在 110% 时可见)。

空白在所有缩放级别都不可见，它只发生在 Chrome 中，这就是我不知所措的原因。如何开始解决这个问题？

仅供引用，我找到了 this link有用，但没有帮助。我的 chrome 版本:

Chrome Version 56.0.2924.87 (64-bit)

Answer 1

这是一个奇怪的问题。我认为这可能与像素分辨率或密度有关。但是我设法用下面的代码修复了它。

ul {
    list-style-type: none;
    width:150px;
}
ul.nav_sub_menu > li {
    width: 100%;
}

ul.nav_sub_menu > li a {
    display: inline-block;

    width: 100%;
    padding: 2.5px 0px 2.5px 5px;

    background: #213059;

    color: white;
    text-decoration: none;

    border-bottom: 5px solid #253767;
    float: left;
}

ul.nav_sub_menu > li a:hover {
    text-decoration: underline;
    background-color: #253767;
}

我添加的只是 float: left; 到 anchor 属性，它删除了列表项之间的白线。尝试一下，看看它对不同的缩放级别有何作用。虽然它对我来说确实适用于 110% 缩放。