當浮動時在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中添加額外的填充/邊距：左

回答

相關問題