Safari 处理 ul/li 中的内容的方式与 Chrome 不同

Question

所以我有这个整洁的水平展开菜单，我在测试浏览器兼容性时遇到了一个奇怪的问题。

似乎Safari处理内容的方式

与Chrome不同，就内容量而言。

/* CSS for raw HTML elements */
body {
  font-family: Century Gothic, sans-serif;
  overflow-x: hidden;
  margin: 0;
}
h1 {
  font-weight: 600;
}
ul {
  padding: 0;
}
.container {
  margin: 0px auto;
}
.accordion {
  width: 100%;
  min-width: 950px;
  display: block;
  list-style-type: none;
  overflow: hidden;
  height: 70vh;
  padding-top: 15vh;
  padding-left: 2vw;
  font-size: 0;
}
#tabs {
  z-index: 2;
  display: inline-block;
  width: 4vw;
  min-width: 50px;
  height: 70vh;
  overflow: hidden;
  position: relative;
  margin: 0;
  font-size: 16px;
  transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
}
#tabs:focus {
  outline: none;
  width: 50vw;
}
.h1-tab {
  font-size: 1rem;
  width: 100px;
  position: absolute;
  bottom: 50px;
  left: -1vw;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
}
.h1-tab::after {
  content: "";
  padding: 2vw;
  position: absolute;
  width: 62.5vh;
  left: -20px;
  top: -22px;
}
.products {
  background-color: yellow;
}
.about {
  background-color: orange;
}
.news {
  background-color: orangered;
}
.contact {
  background-color: red;
}
.paragraph {
  position: relative;
  margin-left: 80px;
  padding: 50px 0 0 10px;
  height: 100vh;
  background: rgb(204,204,204);
}
.paragraph p {
  width: 350px;
  padding: 1rem;
}

  <div class="container">
    <ul id="test" class="accordion">
      <li id="tabs" tabindex="-1" class="products">
        <h1 class="h1-tab">products</h1>
          <div class="paragraph">
            <h1>Products</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </li>
        <li id="tabs" tabindex="-1" class="about">
          <h1 class="h1-tab">about</h1>
          <div class="paragraph">
            <h1>About</h1>
            <p>this li has an extra paragraph of information and messes up the whole structure when viewing this in safari. in chrome it works fine. what the heeeecccck</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </li>
        <li id="tabs" tabindex="-1" class="news">
          <h1 class="h1-tab">news</h1>
          <div class="paragraph">
            <h1>News</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </li>
        <li id="tabs" tabindex="-1" class="contact">
          <h1 class="h1-tab">contact</h1>
          <div class="paragraph">
            <h1>Contact</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </li>
      </ul>
    </div>

这也是一个jsfiddle：https://jsfiddle.net/2bnf65yo/6/

如果您在Chrome中查看它，它可以正常工作并按预期运行。但是，切换到 Safari 将显示其中一个菜单栏（其中包含额外内容的菜单栏）与其他菜单栏歪斜。

我无法判断这是特定于 li 的 Safari 行为，还是我的特定菜单设置的其他行为？

Answer 1

通常，

如果将display: inline-block与不同大小/内容的元素一起使用，则需要使用 vertical-align CSS 属性来确保内容保持对齐状态。

将vertical-align: top添加到li元素以修复 Safari 浏览器问题。

此外，看起来您正在使用类和 ID 的方式与它们应该使用的相反。ID 应该是唯一的（在页面中只出现一次），而类是可以重用的。

换句话说：

<li id="tabs" tabindex="-1" class="products">
<li id="tabs" tabindex="-1" class="about">

应该是：

<li class="tabs" tabindex="-1" id="products">
<li class="tabs" tabindex="-1" id="about">