Flexbox 中固定的位置在 chrome 和 safari / firefox 之间的行为不同答案

【问题标题】：Position fixed in Flexbox behaves differently between chrome and safari / firefoxFlexbox 中固定的位置在 chrome 和 safari / firefox 之间的行为不同
【发布时间】：2017-07-21 10:58:53
【问题描述】：

以下代码在 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>

【问题讨论】：

position: fixed 可能没有从 FF 中的正常流程中删除，应该是这种情况。 stackoverflow.com/q/32991051/3597276
我必须在某个地方，否则我会对此进行更多调查，但这可能会对您有所帮助：github.com/philipwalton/flexbugs

标签： javascript html css flexbox

【解决方案1】：

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

http://autoprefixer.github.io/

我希望这会有所帮助！

【讨论】：