Question

好的，我有一个滑块（使用bx滑块）。

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

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

如果我暂时禁用position: absolute，然后重新启用它，则文本叠加层会突然完美运行。为什么它们在初始页面加载时会被破坏？它在IE中也被打破了，顺便说一下。

＆＃13;

* {
  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)
}

＆＃13;

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

＆＃13;

Answer 1

问题在于您将.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>

位置无法在Firefox中运行？

1 个答案: