为什么在特定屏幕尺寸的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>