インラインブロック要素間の空白

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"> 
 
\t <ul class="nav_sub_menu"> 
 
\t \t <li> 
 
\t \t \t <a href="javascript:void(0)" class="nav_sub_button">About me</a></li><li> 
 
\t \t \t <a href="javascript:void(0)" class="nav_sub_button">Goals</a></li><li> 
 
\t \t \t <a href="javascript:void(0)" class="nav_sub_button">Realizations</a></li><li> 
 
\t \t \t <a href="javascript:void(0)" class="nav_sub_button">Future plans</a></li> 
 
\t </ul> 
 
</div>

この例では、各リスト項目は、それらの間の水平方向の白い線で区切られていることを最初から気づくかもしれません display:inline-blockアンカータグでのスタイルのリストを生成します。そうでない場合は、ブラウザをズームインまたはズームアウトしてください（私にとっては110％で表示されます）。

空白はすべてのズームレベルで表示されず、Chromeでのみ発生するため、私は迷っています。 これはどのようにトラブルシューティングを開始しますか？

FYI、私は有用であることがthis linkを発見したが、それは助けにはなりませんでした。私のクロームバージョン：

クロームバージョン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％ズームで動作しますが。