以下代码在 chrome 中的行为符合预期(即，当我向下滚动时，列表元素将自身定位在 .PageContainer 的最左侧)，但在 safari/firefox 中则不然(即，列表元素将自身定位在 Logo 之后)。我是否遗漏了 CSS 规则中的某些内容？
var stickyEl = $("#top-navigation"),
elTop = 0;
$(window).on('load', function () {
elTop = stickyEl.offset().top;
});
$(window).on("scroll", function() {
stickyEl.toggleClass('sticky', $(window).scrollTop() > elTop);
});.PageContainer {
border:1px solid green;
margin-top:5px;
margin-right: auto;
margin-left: auto;
width: 80%;
height: 1200px;
}
.nav-wrapper {
width: 100%;
background-color: whitesmoke;
display: inline-flex;
border:1px solid red;
vertical-align: middle; /*this is to remove white space between divs */
}
.myLogo {
width: 20%;
float: left;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
border:1px solid blue;
}
.top-navigation{
border:1px solid red;
margin-left: 1em;
position: relative;
margin-top: auto;
margin-bottom: auto;
}
.topnav {
list-style-type: none;
padding: 0;
margin: 0;
}
.topnav li {
display:inline-block;
}
.topnav li a {
display: inline-block;
color: black;
text-align: center;
text-decoration: none;
font-size: 17px;
transition: 1s;
padding: 16px 16px;
}
ul.topnav li a:hover{background-color: #555;}
.sticky {
position: fixed;
top: 0;
margin-left: 0;
-webkit-transform: translateZ(0);
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="PageContainer">
<div class="nav-wrapper">
<div class="myLogo">
<svg viewBox="0 0 200 200" style="display: block;">
<circle cx="100" cy="100" r="100" fill="red"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="white"/>
<text x="100" y="100" text-anchor="middle" dy="0.35em" font-size="300%">my logo</text>
</svg>
</div>
<div class="top-navigation" id="top-navigation">
<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li
><li><a href="#news">News</a></li
><li><a href="#contact">Contact</a></li
</ul>
</div>
</div>
</div>
</body>最佳答案
@SpyTh 如果问题是跨浏览器支持，就像帖子声称的那样，我建议使用 Autoprefixer。您输入您的 CSS，它会生成多种浏览器支持的 CSS。美联社可以在这里找到。
http://autoprefixer.github.io/
希望对您有所帮助!
关于javascript - 固定在 Flexbox 中的位置在 chrome 和 safari/firefox 之间表现不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42543201/