Question

我有一个导航栏，除了Safari以外，在所有浏览器中看起来都很漂亮-它在全屏高度（而不是宽度）上拉伸。在所有浏览器中，它看起来都像这样：https://imgur.com/KB1sBlM

我最初的假设和怀疑是position:sticky，linear-gradient和box-shadow，但这只是我的怀疑。甚至不确定这是否是CSS问题。我还在那儿也使用react-scroller，所以这就是问题吗？

这是我的SCSS代码：

导航栏常规：

.thematic-area-nav {
  position: sticky;
  position: -webkit-sticky;
  width: 70vw;
  top: 0;
  left: 0;
  z-index: 2;
  font-size: 1.3vw;
  -webkit-box-shadow: 0 0 25px 1px #000000;
  box-shadow: 0 0 25px 1px #000000;
  border-radius: 0 0 5px 5px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from($color-background-primary),
    color-stop(50%, rgb(237, 237, 237)),
    to($color-background-primary)
  );
  background: -webkit-linear-gradient(
    top,
    $color-background-primary 0%,
    rgb(237, 237, 237) 50%,
    $color-background-primary 100%
  );
  background: -o-linear-gradient(
    top,
    $color-background-primary 0%,
    rgb(237, 237, 237) 50%,
    $color-background-primary 100%
  );
  background: linear-gradient(
    to bottom,
    $color-background-primary 0%,
    rgb(237, 237, 237) 50%,
    $color-background-primary 100%
  );
  color: black;
  padding: 10px;

  & > * {
    color: black;
  }

  & > ul {
    list-style: none;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 25% auto;
    grid-template-columns: 25% auto;
  }
}

徽标：

.thematic-area-nav__logo {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  width: 100%;
  height: 150%;
}

按钮：

.thematic-area-nav__areas {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12vw, 16vw));
  grid-gap: 0.5em;
  & > button {
    border-top: none;
    border-bottom: none;
    border-right: 1px solid rgb(218, 218, 218);
    border-left: 1px solid rgb(218, 218, 218);
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 1px;
    box-shadow: 1px 1px 1px;
    background-color: $color-background-primary;
    font-size: 1vw;
    &:hover {
      color: black;
      -webkit-box-shadow: inset 1px 1px 1px;
      box-shadow: inset 1px 1px 1px;
      font-weight: bold;
    }
    &:focus {
      outline: none;
      -webkit-box-shadow: inset 1px 1px 1px;
      box-shadow: inset 1px 1px 1px;
      font-weight: bold;
    }
  }
}
.thematic-area-nav__singleThematicArea {
  & a {
    text-decoration: none;
    color: black;
  }
  & > * {
    text-decoration: none;
    cursor: pointer;
    color: black;
  }
}

确实是CSS问题吗？

Answer 1

反应代码引起问题的可能性很小。您能否复制您的react应用程序创建的html，css代码并仅使用这些代码创建测试用例？最好确定在未“启用” JS时是否出现问题。您对共享回购链接的感觉如何？

一些注意事项：在按钮内放置链接似乎不正确。它将绝对不会通过任何可访问性评估，而且class =“ Obszar tematyczny 3”的值似乎也不正确，ul元素应该只有li作为孩子，在其中放置任何其他内容都是错误的。

您的样式中也有很多flex box怪异之处。通过阅读，我真的无法掌握您的意图。我认为您并不完全了解属于flex容器及其子元素的flexbox属性。

除此之外，您可以停止使用*选择器。停下来。如果您这样做，世界将是一个更好的地方。

Answer 2

我研究了jsbin中的html / scss代码，进行了一些清理，并设法实现了一些我认为与您的想法接近的东西。

一些注意事项：

除非有充分的理由不这样做，否则请避免使用vw和vh作为字体大小。

如果以百分比指定宽度/高度，则始终要弄清楚浏览器如何计算这些宽度（问自己“百分比是多少？”）。

使用https://validator.w3.org/-会有所帮助。

避免将驼峰箱和这种东西混在一起。

保持代码整洁。

HTML

<input type="text" class="form-control" value="{{$target->inst_name}}" required disabled>

SCSS

<div class="thematic-area-nav">
  <div class="thematic-area-nav__logo-wrapper">
    <img class="thematic-area-nav__logo" src="https://picsum.photos/200/90" alt="Logo Coaching People">
  </div>
  <ul class="thematic-area-nav__areas">
    <li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 1">Obszar tematyczny 1</a></li>
    <li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 2">Obszar tematyczny 2</a></li>
    <li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 3">Obszar tematyczny 3</a></li>
    <li class="thematic-area-nav__singleThematicArea"><a class="Obszar tematyczny 4">Obszar tematyczny 4</a></li>
  </ul>

</div>

导航栏仅在Safari上才可以全高拉伸

2 个答案: