css - Div仅在chrome中与h1重叠

Question

我是网络开发的新手，正在创建一个网站组合。我的网站是 www.laurenschaller.com。一切都按照我想要的方式工作，除了有时(不总是，如果我刷新它会恢复正常)当我在 chrome 中打开它时，包裹文本“我是谁”的两个波浪重叠该文本，比如这个http://imgur.com/Zxt7bEE

这是 html:

                    <div class="wave1div">
                    <div id="waveBlue1"></div>
                        <img class="wave1" src="img/loadingwave.png" alt="leftwave">
                    </div>

                    <div class="whoIAm">
                        <h1>WHO I AM</h1>
                    </div>
                <div id="waveBlue2"></div>
                    <div class="wave2div">
                            <img class="wave2" src="img/loadingwave.png" alt="rightwave">
                    </div>
                </div>
    <!-- Waves end -->

我是这样设计的:

.waveHeader {
  text-align: center;
}

.wave1div, .wave2div, .whoIAm {
  display: inline-block;
}
.wave1div, .wave2div, #waveBlue2 {
  position: absolute;
  top: 270px;
}
.wave1, .wave2{
  width: 200px;
  position: absolute;
  display: block !important;
}

#waveBlue2, #waveBlue1 {
  height: 43px;
  background: $blue;
  position: absolute;
  display: inline-block;
  text-align: center;
}

#waveBlue1 {
 width: 0px;
 max-width: 198px;
 right:15px;
 bottom:-43px;
 margin-left: -50px;
}

#waveBlue2 {
  max-width: 200px;
}

.prog-bar1, .wave1 {
  left: -213px;
}

如果有任何编码不当，我深表歉意。就像我说的，我对学习很陌生，感谢您的帮助。

Answer 1

我会删除“waves”div，只保留标题，如下所示:

<section class="about">
  <h1>WHO I AM</h1>
</section>

然后在标题本身的 :before 和 :after 伪元素中添加波浪作为背景。

.about h1:before, .about h1:after {
    content:'';
    width:200px;
    height:44px;
    display:inline-block;
    background:url('img/loadingwave.png') no-repeat;
    background-color:#86c3c1;
    background-size:200px 44px;
}
.about h1:before {
    margin-right:30px;
}
.about h1:after {
    margin-left:30px;
}

伪元素非常酷，你可以用它们做很多效果。读一读:

Learning To Use The :before And :after Pseudo-Elements In CSS

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

另一种方法是将标题的内容放在一个范围内，如下所示:

<h1><span>WHO I AM</span></h1>

然后您可以将 span 的背景设置为白色，并将波浪作为 h1 元素的背景:

.about span {
  background:#FFF;
}
.about h1 {
  background:url('files/wave-orig.png') center repeat-x;
  background-color:#86c3c1;
  background-size:200px 44px;
}

如果您决定采用 span 方式，则必须修复大量标记 - 让您的标题 block 级元素、声明适当的高度、调整容器的宽度等。

我只是告诉你这是另一种选择，但伪元素方式将是最容易用你当前的布局实现的。

顺便说一下，我还注意到您在相当多的元素上使用了 margin-bottom:rhythm - 这不是有效的 CSS，它不会执行任何操作。