为什么会出现在某些屏幕尺寸的DIV之间的空白

我有以下代码：为什么会出现在某些屏幕尺寸的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> 
</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; 
}

大多数屏幕尺寸输出：

enter image description here

出于某种屏幕尺寸：

enter image description here

三幅影像：

enter image description here

请帮助得到一些这些设备的摆脱白色空间。

来源

2014-11-06 Si8

你能不能设置一个[ jsfiddle]（http://jsfiddle.net），我很乐意帮助你。 – Jacta 2014-11-06 16:01:56

我有jsfiddle，但没有显示出于某种原因：http://jsfiddle.net/56zcwacs/（我从我的问题中拿走了图像链接） – Si8 2014-11-06 16:10:43

你可以尝试添加注释“链接”的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>

来源

2014-11-06 16:05:06 peppeocchi

你究竟是什么意思？ – Si8 2014-11-06 16:22:36

请参阅divs之间的灰色''？它的意思是删除它们之间的空格，这就是他的意思 – Banana 2014-11-06 16:27:04

@ SiKni8插入html注释标记删除空格（在你的情况下，分隔div的“新行” - 被解释为一个空格 - 见代码在我的回答中，在每个

之后开始评论，并在下一个

之前关闭评论。如果你想让代码缩进，如果你愿意，你可以删除div之间的所有“新行”这是相同的 – peppeocchi 2014-11-06 16:27:28

为什么会出现在某些屏幕尺寸的DIV之间的空白

回答

相关问题