모바일 브라우저에서 내 div의이 공간은 어디서 오는가?

Question

그래서 내 div 중 하나에서 이상한 공간 문제가 있지만 안드로이드 웹킷 브라우저 533.1 (최신 버전의 웹킷 안드로이드 브라우저는 문제가 없음)에서만 볼 수 있습니다. 이 문제는 데스크톱, 최신 모바일 장치 또는 브라우저가 아닌 다른 곳에서는 나타나지 않습니다. 등 오래된 안드로이드 재고 브라우저 만.

Here is the web page. 문제의 div는 전화 번호와 주소가있는 div입니다 (화면 하단, facebook 및 twitter 아이콘 아래).

코드를보기 위해 방화 광을 사용하는 것이 더 쉬울 것이라고 생각하지만, 필요한 경우 여기에 일부 코드를 게시 할 수 있습니다. 단지 css (여러 미디어 쿼리)가 있습니다.

다음은 div 코드입니다. 간격은 사업부의 첫 번째 요소 앞에 발생 : 나는 행운에 모두 자동으로 초기에 DIV 번호의 footer_div 높이를 설정하려고했습니다

<footer class="hideForDesktop" id="ont_foot"> 
    <div id="footer_div"> 
     <p id="number">909.390.3092 </p> 
     <p> 1155 S. Wanamaker Ave, Ontario, CA 91761</p> 


    <div id="bottom-mob-nav"> 
      <!-- navigation module --> 
     <nav id="ontario_nav2"> 

    <ul> 
     <li class="here"><a title="Scandia Home" href="/ontario/index.php">Home</a></li> 
     <li><a title="Scandia Rates &amp; Hours" href="/ontario/rates_hours.php">Rates &amp; Hours</a></li> 
     <li><a title="Get Directions to Scandia" href="/ontario/directions.php">Directions</a></li> 
     <li><a title="Rides, Games, &amp; Fun" href="/ontario/attractions.php">Attractions</a></li> 
     <li><a title="Throw Your Party at Scandia!" href="/ontario/parties.php">Parties</a></li> 
     <li class="show"><a title="Bring your group party to Scandia" href="/ontario/group_events.php">Group Events</a></li> 
     <li><a title="Educational tours at Scandia!" href="/ontario/education.php">Education</a></li> 
     </ul> 
     </nav> 
    </div> 
    <div id="end"> 
    <p class="boring">&copy; 2014 Scandia Family Fun Center</p> 
    <p class="boring">Prices, terms and conditions subject to change without notice. Some rides may be closed during inclement weather.</p> 

    <div id="otherLocs"> 
     <ul> 
      <li class="grey"><a href="http://www.scandiafun.com/ontario">Ontario</a></li> 
      <li><a href="http://www.scandiafun.com/sacramento">Sacramento</a></li> 
      <li><a href="http://www.scandiafun.com/victorville">Victorville</a></li> 
     </ul> 

    </div> 

    <div id="other"><a href="#other">Other locations</a></div> 
</div> 
    </div> 
      </footer> 

.

스크린 샷 :

Answer 1

은 그래서 수정, 그것이 최선의 방법인지 확실하지를 찾았지만 작동합니다. HTML에서 여러 가지 문제를 확인했지만 그 사실을 없앴습니다. 모든 div 주위에 테두리를두고 간격을 초래하는 div를 찾았습니다. 그런 다음 div에서 모든 내용을 삭제하고 여전히 높이 (간격의 크기와 같음)를 발견했습니다. 따라서 CSS에서 div 높이를 0으로 설정했습니다. 그러면 간격을 제거한 다음 다시 스타일을 만들어야합니다. 내 CSS에서 몇 가지 모든 것이 그것이 모양새를하고는했다.

내 원래의 게시물을 보면, 문제의 원인이 된 사업부가 footer#ont_foot했다.