크롬에서만 h1이 겹치는 부분

Question

저는 웹 개발에 익숙하지 않고 웹 사이트 포트폴리오를 만들고 있습니다. 내 웹 사이트는 www.laurenschaller.com입니다. 모든 것이 내가 원하는 방식대로 작동합니다. 때로는 (항상 정상으로 돌아가는 것이 아니라, 항상 정상으로 돌아갑니다) 크롬을 열면 "Who I Am"이라는 텍스트가 겹쳐지는 두 개의 파도가 여기 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

나는 "파도"된 div를 삭제하고 그냥이 같은 제목을 떠날 것이다 :

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

그런 다음에 대한 배경으로 파도를 추가 : 전 : 자체를 제목에 의사 요소 후.

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

을 그럼 당신은 할 수 있습니다 스팬의 배경을 흰색으로 설정하고 h1 요소의 배경으로 파도를 설정합니다.

,451,515,

당신은 당신이 생각 스팬 길을 갈 것을 결정하는 경우에 마크 업을 많이 수정해야 - 난 그냥 당신을 말하고 컨테이너의 폭 등

를 조정, 적절한 높이를 선언, 당신의 제목 레벨 요소를 차단하기 이것에 대해서는 또 다른 옵션이지만, 의사 요소 방식은 현재 레이아웃으로 구현하는 것이 가장 쉽습니다.

덧붙여서 나는 꽤 많은 요소에 대해 margin-bottom:rhythm을 사용하고있는 것으로 나타났습니다. 유효한 CSS가 아니며 아무 것도하지 않습니다.