Question

我的网站存在问题，导航栏会在Safari和IOS设备上自动堆叠，但不会在任何其他浏览器上堆叠。

我希望导航栏只能以一个certian屏幕宽度堆叠，它不应该在我的计算机屏幕上堆叠，但是当我在safari中查看时它会这样做

以下是我的CSS示例：谢谢

.Nav {
  background:url(//p2.zdassets.com/hc/theme_assets/521042/200069254/bg-dark.jpg);
  border: 1px solid #ccc;
  border-right: none;
  width: 100%;
  margin-bottom: 0px;
}
.Nav ul {
  margin: 0;
  padding: 0;
}
.Nav ul li {
  list-style: none;
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}
.Nav ul li:first-child {
  border-left: none;
}
.Nav ul li a {
  display: block;
  text-decoration: none;
  color: #FFF;
  padding: 10px 0;
}
.Nav ul li a:hover {
  display: block;
  text-decoration: none;
  color: #bec3c6;
  padding: 10px 0;
}
.Nav {
  display: table;
  table-layout: fixed;
}
#Ul {
  display: flex;
  flex-direction: row;
}
#Ul li {
	flex-grow: 1;
}
/*To make it Responsive*/

@media (max-width: 330px) {
  
  #Ul {
    display: block;
  }

  .Nav {
    font-size: .8em;
    width:100%;
  }
  
  .Nav ul li {
    display: block;
    border-bottom: 1px solid #ccc;
  }

}

以下是HTML：

<subheader> 
        <div class="Nav">
          <ul id="Ul">
            <li><a href="" target="new">Homepage</a></li>
            <li><a href="">Downloads</a></li>
            <li><a href="">Downloads</a></li>
            <li><a href=""target="new">Help</a></li>
            <li><a href="">Submit a Ticket</a></li>
            <li><a href="" target="new">Contact</a></li>
          </ul>
        </div>
</sidebar>

Answer 1

你实际上应该为这个flex样式编写你的css（对于浏览器兼容性）：

#Ul {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: row;
}

#Ul li {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

这是http://jsfiddle.net/t1ub0b2s/3/

Safari中的Navbar堆栈

1 个答案: