Question

我不确定解释此问题的最佳方式，但如果您查看Chrome或Safari中的示例代码段，当窗口比蓝色更窄时，橙色div不会导致文档水平滚动容器。这是理想的行为。

然而，在Firefox中，如果您使窗口变窄，则将橙色框计为需要能够滚动到的内容，从而导致文档以奇怪的方式向右滚动，从而将正文内容转移到离开了，很难看。同样奇怪的是，你会注意到左边的绿色框，因为它左侧有可滚动的空间......这是一个错误，或者为什么会发生这种情况？< / p>

其他人遇到过这个？

＆＃13;

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 700px;
  height: 200px;
  margin: 0 auto;
}

.banner {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: blue;
  position: relative;
  transform: scale(1);
  color: #ffffff;
}

.banner:before, .banner:after {
  content: '';
  width: 100px;
  height: 100%;
  position: fixed;
  left: -100px;
  top: 0;
  background-color: green;
}

.banner:after {
  left: 100%;
  background-color: orange; 
}

.content {
  width: 100%;
  height: 300px;
  padding: 10px;
  background-color: #f1f1f1;
  margin-top: 40px;
}

＆＃13;

<div class="wrapper">
  <div class="banner">Banner</div>
  <div class="content">Content</div>
</div>

＆＃13;

Answer 1

您可以将其包装在将随视口缩放的元素中，并在该元素上设置overflow: hidden。您也可以从transform: scale()移除.banner并在伪元素上使用position: absolute，除非出于某种原因需要scale(1)。

＆＃13;

* {
  box-sizing: border-box;
}

header {
  overflow: hidden;
}

.wrapper {
  max-width: 700px;
  height: 200px;
  margin: 0 auto;
}

.banner {
  height: 100%;
  padding: 10px;
  background-color: blue;
  position: relative;
  color: #ffffff;
}

.banner:before, .banner:after {
  content: '';
  width: 100px;
  height: 100%;
  position: absolute;
  left: -100px;
  top: 0;
  background-color: green;
}

.banner:after {
  left: 100%;
  background-color: orange; 
}

.content {
  height: 300px;
  padding: 10px;
  background-color: #f1f1f1;
  margin-top: 40px;
}

＆＃13;

<header>
  <div class="wrapper">
    <div class="banner">Banner</div>
    <div class="content">Content</div>
  </div>
</header>

＆＃13;

Firefox在外部容器宽度

1 个答案: