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 个答案: