Question

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

似乎Safari根据li中的内容数量处理与Chrome不同的内容。

＆＃13;

/* 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;
}

＆＃13;

  <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>

＆＃13;

这里也是一个小伙伴：https://jsfiddle.net/2bnf65yo/6/

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

我无法判断这是否是特定于某人的Safari行为，或者是我的特定菜单设置的其他内容？

Answer 1

通常，如果您将display: inline-block与不同大小/内容的元素一起使用，则您希望使用vertical-align CSS属性来确保您的内容保持排列。< / p>

将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">

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

1 个答案: