内联块在Firefox中增加额外的空间 [英] Inline block adding extra space in firefox

问题描述

我有一个网页，我已经堆积我的div与内联块属性。但是，它仅在Firefox中的两个div之间添加了额外的空间。 Safari和Chrome的设计是一致的。

下面是示例小提琴

  #main {
 display：block; 
} 
＃sub11，＃sub12，＃sub21，＃sub22，＃sub31，＃sub32 {
 display：inline-block; 
背景：红色; 
 padding：0; 
 // margin-right：-4px; 
 margin-top：3px; 
 margin-bottom：3px; 
 
 
 
 $ b 
 Firefox在 GHI 和 TRY 行，而ABC和GHI与TRY之后的其他行保持一致。 
解决方案
  
 $ p $  @ moz-document url-prefix（）{
 #myRowID {margin-top：-5px;} 
} 
  
 
 
 
解决了我奇怪的问题。
 
I have a webpage where I have stacked my div's with inline-Block properties. However, it adds extra spacing only between two div's in Firefox. The design is consistent in Safari and Chrome.

Here's the sample fiddle for that.
#main {
    display: block;
}
#sub11, #sub12, #sub21, #sub22,  #sub31, #sub32 {
    display: inline-block;
    background:red;
    padding:0;
    //margin-right:-4px;
    margin-top:3px;
    margin-bottom:3px;
}
Firefox adds extra space betweeb GHI and TRY row, while the ABC and GHI are consistent with other rows that comes after TRY. 
解决方案
I used following css fix exclusively for that one row
@-moz-document url-prefix() {
    #myRowID {margin-top:-5px;}
}
That solves my weird issue.

                        
这篇关于内联块在Firefox中增加额外的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！