為什么在某些屏幕尺寸的DIV之間存在空白

Question

我有以下代碼：

<div class="mobileTabsNavSub brClear">
    <div class="mbBtnLeftMW mbBtnLeftStyle floatLeft">
    </div>
    <div class="mbBtnRightMW mbBtnRightStyle floatRight">
    </div>
    <div class="mBtnMidMW mBtnMidStyle">
        <div>
            <img id="mbMW1" src="icon.png" class="mBtnIcon" />
        </div>
        <div>
            <a href="localhost:9090" title="services"><span id="mbMW" class="mbBtnText">Services</span></a>
        </div>
    </div>
</div>

CSS：

.mobileTabsNav
{
    display: none;
    width: 100%;
    overflow: hidden;
    margin: 10px 0 10px 0;
}
.mobileTabsNavSub
{
    width: 100%;
    padding: 0 0 10px 0;
}
.mbBtnLeftMW
{
    background: url('../theImages/mbMWLeft.png') no-repeat;
}
.mbBtnRightMW
{
    background: url('../theImages/mbMWRight.png') no-repeat;
}
.mBtnMidMW
{
    background: url('../theImages/mbMWMiddle.png');
}
.mbBtnLeftStyle
{
    min-height: 50px;
    max-height: 50px;
    width: 10px;
    background-size: contain;
}
.mbBtnRightStyle
{
    min-height: 50px;
    max-height: 50px;
    width: 10px;
    background-size: contain;
}
.mBtnMidStyle
{
    overflow: hidden;
    min-height: 50px;
    max-height: 50px;
    background-size: contain;
    margin: 0 0px 0 8px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}
.floatLeft
{
    float: left;
}
.floatRight
{
    float: right;
}

在大多數屏幕尺寸上輸出：

在某些屏幕尺寸上顯示：

三個圖像：

請幫助擺脫某些設備上的空白。

Answer 1

您可以嘗試添加注釋以“鏈接” div並刪除任何空白（由於浮動位置，因此不確定是否適合您的情況）

<div class="mobileTabsNavSub brClear">
   <div class="mbBtnLeftMW mbBtnLeftStyle floatLeft"></div><!--
--><div class="mbBtnRightMW mbBtnRightStyle floatRight"></div><!--
--><div class="mBtnMidMW mBtnMidStyle">
    <div>
        <img id="mbMW1" src="icon.png" class="mBtnIcon" />
    </div>
    <div>
        <a href="localhost:9090" title="services"><span id="mbMW" class="mbBtnText">Services</span></a>
    </div>
</div>