网格布局在Firefox中被破坏,但在Chrome中没有

时间:2016-12-13 07:16:12

标签: html css css3 google-chrome firefox

对于学校项目,我必须建立一个网站。我所建立的网站似乎在Firefox中显示的网格布局不正确。在chrome / all浏览器中,它应该是这样的 chrome screenshot

然而在Firefox中它会像这样出现,

firefox screenshot

It's almost like there's padding on the container or a margin on the row, but there isn't.

img gif

如果有人能提供帮助,那就太好了。我在这里添加了一个JSFiddle,https://jsfiddle.net/o31t9eLb/

1 个答案:

答案 0 :(得分:3)

您应该在.sidebar和.container上添加vertical-align: top;,因为默认情况下,vertical-align设置为中间。

原因在这里得到了很好的解释:Default value of vertical-align for table cells