[英]Bootstrap's NAV element inside display:table-cell element has a wrong alignment on Firefox
Consider this HTML markup (with Bootstrap lib included): 考虑以下HTML标记(包括Bootstrap lib):
<div class="container">
<div class="card">
<ul class="nav list">
<li class="element">
<a href="#">Element</a>
</li>
<li class="element">
<a href="#">Another element</a>
</li>
</ul>
<div class="content">
<div>
First content
</div>
<div>
Second content
</div>
</div>
</div>
</div>
and this CSS code: 和此CSS代码:
.container {
display: table;
layout: table-fixed;
}
.card {
display: table-row;
width: 300px;
}
li {
display: inline-block;
background-color: red;
padding: 20px;
}
.list {
display: table-cell;
width: 100px;
white-space: nowrap;
}
.content {
display: table-cell;
width: 200px;
background-color:blue;
height: 200px;
}
I have googled a lot already but still can't get a clue why Firefox displays this code different than Chrome. 我已经在Google上进行了很多搜索,但是仍然不清楚为什么Firefox显示的代码与Chrome不同。 It just giving a some kind of padding/margin for table-cell div with navbar and then it is not aligned with the other, content table-cell on top. 它只是为带有navbar的表单元格div提供某种填充/边距,然后它与顶部的另一个内容表单元格不对齐。 See pics: 看图片:
Did anybody experience that type of problem with Firefox/Bootstrap. 有没有人遇到过Firefox / Bootstrap这类问题。 I will appreciate any help, thanks in advance! 我将不胜感激,在此先感谢您!
Live demo: https://jsfiddle.net/9cztjd6o/3/ 现场演示: https : //jsfiddle.net/9cztjd6o/3/
This gap is an empty text line which is caused by default bootstrap ":before" styles. 此间隙是一个空文本行,由默认引导程序“:before”样式引起。 You can hide it with something like that: 您可以使用以下方式将其隐藏:
.container:before, .list:before {
display: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.