在Flexbox中固定的位置在Chrome和Safari / Firefox之间的行为有所不同

Question

以下代码在chrome中的行为符合预期（即，当我向下滚动时，列表元素将其自身放置在.PageContainer的最左侧），但在safari / firefox中则不起作用（即，列表元素将其自身放置在徽标之后）。 我在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>

Answer 1

@SpyTh如果问题是跨浏览器支持，如帖子声明，我建议使用Autoprefixer。 您输入CSS，它将生成在多个浏览器中受支持的CSS。 AP可以在这里找到。

http://autoprefixer.github.io/

我希望这有帮助！

在Flexbox中固定的位置在Chrome和Safari / Firefox之间的行为有所不同

问题描述

1 个解决方案

解决方案1
0 2017-03-02 03:54:29

在Flexbox中固定的位置在Chrome和Safari / Firefox之间的行为有所不同

问题描述

1 个解决方案

解决方案1 0 2017-03-02 03:54:29

解决方案1
0 2017-03-02 03:54:29