chrome在div下創建額外空間

我遇到了一個bug，其中chrome會在iframe下插入最小量的額外空間。見這裏http://jsfiddle.net/hrp27/。整個代碼是chrome在div下創建額外空間

<div class="subwindow" style="overflow-y: auto;"> 
    <div id="blog" style="line-height: 0px;"> 
     <div class="container-fluid main-holder"> 
      <iframe src="http://elju.github.io" frameborder="0"> 
      </iframe> 
     </div> 
    </div> 
</div>

這同樣的問題不會發生在Firefox中。我已經看了一會兒，不知道是什麼原因造成了這個問題。我在問，因爲我的網站http://secure-shore-8758.herokuapp.com/有類似的問題。由於某種原因，Chrome似乎是在我沒有告訴它的情況下自動將overflow-y：auto插入到我的代碼中。如果有人能解釋這種行爲，那會很棒！

來源

2013-05-05 elju

你能也張貼你的相關的CSS代碼？ – Eyal 2013-05-05 08:34:09

這實際上是完成它所需的全部代碼。如果你用chrome打開那個小提琴，它的最右端有滾動條，但firefox中不會發生這種情況。 – elju 2013-05-05 08:37:22

您的「博客」元素上有一個屬性「line-height：0px」。取下固定額外的空間

也可以更改子窗口類的溢出-Y屬性設置爲「無」是這樣的：

<div class="subwindow" style="overflow-y: none;"> 
    <div id="blog" style="line-height: 0px;"> 
     <div class="container-fluid main-holder"> 
      <iframe src="http://elju.github.io" frameborder="0"> 
      </iframe> 
     </div> 
    </div> 
</div>

來源

2013-05-05 08:33:09 Eyal

謝謝！但是你知道爲什麼這會發生在Chrome而不是Firefox？此外，我很困惑爲什麼指定行高是0px使div更改位置。 Chrome開發人員工具包告訴我，.blog和.subwindow的像素高度相同，所以我非常困惑導致滾動條發生的原因。 – elju 2013-05-05 08:39:34

chrome在div下創建額外空間

回答

相關問題