2016-08-02 9 views
1

私は自分のウェブサイトにメニューバーを作成しています。私の問題は、メニュー項目の横に小さな余白があることです。 (私は背景色:黒をコンテナに追加することでこれを強調しました)私はサファリを使用しています。HTML/CSS - 見つけることができない幻の余白

margin issue

CSS:

.testMenuOption{ 
    width: calc(100% /3); 
    height: 100%; 
    float: left; 
    margin:auto; 
    background-color: white; 
    display: table; 
} 

誰かが私の問題が何であるかを教えてもらえますか?テキストを削除しようとしましたが、それは問題ではありません。

答えて

4

100/3を使用して幅を計算するため、丸め誤差が発生します。その結果、幅が100%再加算されません。これを修正するには、2つの.menuOptionsWrapsの幅を33%、1〜34%に設定します。

.menuOptionSelectedWrap { 
    float: left; 
    width: 33%; 
    height: 100%; 
    margin: auto; 
    margin-right: -4px; 
    background-color: #d6eef2; 
    display: table; 
} 
.menuOptionSelectedWrap:last-of-type { 
    width: 34%; 
} 
+1

'width:33.33333333%'も同様に動作するはずですが、ブートストラップはこれを実行します。 – AlexG

+0

確かに33.33333333%は完全に正確になることはありませんか? – Xenidious

+1

これはコンテナの合計サイズによって異なります。残りの0.0000001%のスペースがブラウザでピクセルとしてレンダリングするのに必要な量より少ない場合、私は見えません。しかし、おそらく、おそらく、そのようなコンテナがそのピクセルをレンダリングするためにどれだけ馬鹿げて大きかったかを推測できます。 –

0

私は黒のラインの変更時にウィンドウresize.checkあなたのCSS、幅ことを、あなたの言うことはよく分からない:そうすることによって、例えば

カルク(100%/ 3); 値を3に変更すると、アイデアが得られます。

関連する問題