位置在Firefox中不起作用？

debugcn 发表于 Dev

杰森·阿克塞尔罗德（Jason Axelrod）

好的，所以我有一个滑块（使用bx-slider）。

在chrome中，滑块看起来很完美。但是，在Firefox中，不会显示文字叠加层。如果右键单击并检查元素，将看到以下css设置：

.featuresGrid ul li .summary {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

如果我暂时禁用position: absolute，然后重新启用它，则文字叠加层会突然正常工作。为什么它们在初始页面加载时损坏？顺便说一句，它在IE中也坏了。

* {
  margin: 0;
  padding: 0
}
.featuresGrid .featuresOuter {
  position: relative;
  z-index: 1;
  background-color: #000;
  overflow: hidden;
}
.featuresOuter .bx-wrapper {
  max-width: 100%;
}
.featuresOuter .bx-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 200px;
}
.featuresOuter .bx-viewport > .heightFix {
  width: auto;
  position: relative;
}
.featuresOuter .heightFix {
  height: 200px;
}
.featuresOuter ul li {
  list-style: outside none none;
  position: absolute;
  z-index: 0;
  width: 1158px;
}
.featuresGrid ul li a {
  position: relative;
}
.featuresGrid ul li .summary {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5)
}

<div class="section featuresGrid" id="featuresGrid">
  <div class="featuresOuter">
    <div class="bx-wrapper">
      <div class="bx-viewport">
        <ul class="heightFix">
          <li>
            <a href="#">
              <div class="heightFix">
                <div class="summary">
                  <div class="title">SoulCast #34: The GloomyCast</div>
                  <div class="excerpt">"GloomyCast" kind of sounds like a bad weather report, doesn't it? In any case, a big ring made of deathblades seems a bit dangerous for the user, if you ask me, but warning labels aren't going to keep Tira down! This episode SaltFace_GA
                    was kind enough to come on to the podcast and talk some Tira strats. I had to fight a little technical difficulty, but I hope you still enjoy! Only a couple of characters left after this! 8104 YouTube channel:...</div>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

问题在于您.summary相对于锚点（这是一个内联元素）相对定位。这可能是有问题的。

然后，您可以添加

.featuresGrid ul > li > a {
  display: block;
}

* {
  margin: 0;
  padding: 0
}
.featuresGrid .featuresOuter {
  position: relative;
  z-index: 1;
  background-color: #000;
  overflow: hidden;
}
.featuresOuter .bx-wrapper {
  max-width: 100%;
}
.featuresOuter .bx-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 200px;
}
.featuresOuter .bx-viewport > .heightFix {
  width: auto;
  position: relative;
}
.featuresOuter .heightFix {
  height: 200px;
}
.featuresOuter ul li {
  list-style: outside none none;
  position: absolute;
  z-index: 0;
  width: 1158px;
}
.featuresGrid ul li a {
  position: relative;
  display: block;
}
.featuresGrid ul li .summary {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5)
}

<div class="section featuresGrid" id="featuresGrid">
  <div class="featuresOuter">
    <div class="bx-wrapper">
      <div class="bx-viewport">
        <ul class="heightFix">
          <li>
            <a href="#">
              <div class="heightFix">
                <div class="summary">
                  <div class="title">SoulCast #34: The GloomyCast</div>
                  <div class="excerpt">"GloomyCast" kind of sounds like a bad weather report, doesn't it? In any case, a big ring made of deathblades seems a bit dangerous for the user, if you ask me, but warning labels aren't going to keep Tira down! This episode SaltFace_GA
                    was kind enough to come on to the podcast and talk some Tira strats. I had to fight a little technical difficulty, but I hope you still enjoy! Only a couple of characters left after this! 8104 YouTube channel:...</div>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

另外，您可以.summary相对.heightFix以下位置：

.featuresOuter .heightFix {
  position: relative;
}

* {
  margin: 0;
  padding: 0
}
.featuresGrid .featuresOuter {
  position: relative;
  z-index: 1;
  background-color: #000;
  overflow: hidden;
}
.featuresOuter .bx-wrapper {
  max-width: 100%;
}
.featuresOuter .bx-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 200px;
}
.featuresOuter .heightFix {
  height: 200px;
  position: relative;
}
.featuresOuter ul li {
  list-style: outside none none;
  position: absolute;
  z-index: 0;
  width: 1158px;
}
.featuresGrid ul li a {
  position: relative;
  display: block;
}
.featuresGrid ul li .summary {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5)
}

<div class="section featuresGrid" id="featuresGrid">
  <div class="featuresOuter">
    <div class="bx-wrapper">
      <div class="bx-viewport">
        <ul class="heightFix">
          <li>
            <a href="#">
              <div class="heightFix">
                <div class="summary">
                  <div class="title">SoulCast #34: The GloomyCast</div>
                  <div class="excerpt">"GloomyCast" kind of sounds like a bad weather report, doesn't it? In any case, a big ring made of deathblades seems a bit dangerous for the user, if you ask me, but warning labels aren't going to keep Tira down! This episode SaltFace_GA
                    was kind enough to come on to the podcast and talk some Tira strats. I had to fight a little technical difficulty, but I hope you still enjoy! Only a couple of characters left after this! 8104 YouTube channel:...</div>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。