当浮动时在Firefox中添加额外的填充/边距：左

任何人都可以帮助我理解这一点吗？当浮动时在Firefox中添加额外的填充/边距：左

您可以在这里看到的例子：

HTML：

<div class="rt-block"> 
    <div> 
     <div> 
      <div class="itemContainer"> 
       <span>Lorem ipsum dolor sit amet</span> 
      </div> 
      <div class="clr"></div> 
     </div> 
     <div class="k2Pagination"> 
     </div> 
    </div> 
</div>

CSS：

.rt-block { 
    margin: 10px; 
    padding: 15px; 
    position:relative; 
} 

.itemContainer {float:left;} 

.k2Pagination { 
    margin: 24px 0 4px; 
} 

.clr { 
    border: medium none; 
    clear: both; 
    display: block; 
    float: none; 
    height: 0; 
    line-height: 0; 
    margin: 0; 
    padding: 0; 
}

在Firefox中，有 “itemContainer” 之间的差距和周围的“rt-block”。其他浏览器没有这个。

这是固定的两件事：删除浮动：留在itemContainer，并通过消除k2分页边距。如果可能的话，我宁愿不做这些事情。

感谢所有帮助

来源

2013-07-18 alex rees

我在每个浏览器中都有这个空白吗？这是有道理的，因为有一个15px的填充。如果你在谈论下面的差距，这也是有道理的，因为有k2Pagination有余量。也许你应该添加边框并截取你的意思。这个http://jsfiddle.net/zhsnj/4/在chrome，ff和ie9上看起来完全一样 – 2013-07-18 15:17:34

首先，这是显示我看到它在Firefox：

enter image description here

我认为你有一个太多<div>。在Firefox上查看时，在<div class="rt-block">之后的第一个<div>上添加了额外的填充。我的猜测是，它会产生一个换行符，导致浮点数在该行下浮动，似乎可以通过将line-height: 0添加到此div来确认问题得到证实。

您可以删除多余的<div>：

<div class="rt-block"> 
    <div> 
     <div class="itemContainer"> 
      <span>Lorem ipsum dolor sit amet</span> 
     </div> 
     <div class="clr"></div> 
    </div> 
    <div class="k2Pagination"> 
    </div> 
</div>

jsfiddle

或者你也可以行高设置为0，第一个div：

.rt-block > div { 
    line-height: 0; 
}

jsfiddle

或者更好的是，使它内联块：

.rt-block > div { 
    display: inline-block; 
}

jsfiddle

来源

2013-07-18 15:26:46 Tchoupi

哇，你是对的，我从来没有注意到这些3px左右。 – 2013-07-18 15:30:52

@Layne这很奇怪，我在Firefox中有一个额外的23px。 – Tchoupi

是的，nvm。我的边框不知何故与Firefox的行为混为一谈，并将其减少到3-5px的差异。 – 2013-07-18 15:43:28

我不知道什么是在Firefox额外间距的原因，但你可以给填充，而不是利润率。

.k2Pagination { 
padding: 24px 0 4px;}

这很简单，它可能工作。

来源

2013-07-18 15:45:07 mbkh10

工作，谢谢。奇怪的是，问题只出现在保证金和没有填充。尽管我认为上面的内联块修复更好 –

当浮动时在Firefox中添加额外的填充/边距：左

回答

相关问题