内联块元素之间的空白区域

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锚标记的样式列表 您可能会从一开始就注意到每个列表项之间用水平白线分隔。如果没有，请尝试放大或缩小浏览器（对我来说，以110％可见）。

在所有缩放级别都看不到空白区域，只有在Chrome中才会出现，这就是我不知所措的原因。 如何开始对此进行故障排除？

仅供参考，我发现this link有用，但没有帮助。我的chrome版本：

  

Chrome版本56.0.2924.87（64位）

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;到锚属性，它删除了列表项之间的白线。试一试，看看它对不同的缩放级别有什么作用。虽然它适用于 110％缩放。