Internet Explorer에서만 DIV 정렬 문제 발생

이 문제는 자주 발생하는 것으로 보였으 나 위와 아래를 검색했지만 아직 내 특정 문제에 대한 해결책을 찾지 못했습니다.Internet Explorer에서만 DIV 정렬 문제 발생

내 웹 페이지는 Firefox 및 Chrome과 Windows 8의 IE10에서 완벽하게 표시됩니다. 그러나 다른 IE 버전에서는 모두 내 DIV가 엉망입니다.

올바른 레이아웃 : 구글 광고 탐색 표시 줄 아래에, 그리고 광고의 오른쪽에있는 테이블 (팀 목록)과 흰색의 콘텐츠 섹션의 왼쪽에 정렬됩니다.

요소를 검사하고 IE, Chrome 및 Firefox를 비교 한 결과 여기에 문제가있는 것으로 보이지만 근원은 내가 말할 수있는 한 완벽하게 멋지게 보입니다. Internet Explorer에서는 둘 다 "clearfix"와 "main-fullwidth"DIV는 같은 지점에서 시작됩니다 (각 DIV의 윗부분은 다른 부분과 짝수입니다). "header"div의 맨 아래에 플러시합니다.

그러나 "main-fullwidth"DIV는 "clearfix"DIV 이후에 AFTER/BELOW를 시작해야합니다.

왜 이런 일이 일어나고 있는지 이해할 수 없습니다. 여기

가의 index.php에서 관련 코드 : 모든

<div class="clearfix"> 
    <div class="menu-primary-container"> 
     <ul id="menu-custom-primary-menu" class="menus menu-primary"> 
      <li id="menu-item-241" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-241"><a href="http://www.pitmanstats.com" >Home</a></li> 
      <li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="http://www.pitmanstats.com/pages/" >My Pages</a> 
      <ul class="sub-menu"> 
       <li id="menu-item-242" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-242"><a>DII Canton District</a></li> 
       <li id="menu-item-243" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-243"><a>DIII Wooster District</a></li> 
       <li id="menu-item-245" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-245"><a>Triway Basketball</a></li> 
       <li id="menu-item-244" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-244"><a>Quarter&#8217;s Corner</a></li> 
      </ul> 
      </li> 
      <li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441"><a href="http://www.pitmanstats.com/mobile/" >Mobile Apps</a></li> 
      <li id="menu-item-240" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-240"><a>About</a> 
      <ul class="sub-menu"> 
       <li id="menu-item-237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-237"><a href="http://www.pitmanstats.com/about/about-me/" >About Me</a></li> 
       <li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="http://www.pitmanstats.com/about/history-of-pitmanstats-com/" >History of PITmanStats.com</a></li> 
       <li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239"><a href="http://www.pitmanstats.com/about/contact/" >Contact</a></li> 
      </ul> 
      </li> 
     </ul> 
    </div><!--.primary menu--> 
    <div id="topsearch"> 
     <div id="search" title="Type and hit enter"> 
      <form method="get" id="searchform" action="http://www.pitmanstats.com/"> 
       <input type="text" value="Search" name="s" id="s" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" /> 
      </form> 
     </div><!-- #search --> 
    </div><!-- topsearch --> 
</div><!-- clearfix -->

구글이다 "left_sidebar.php"

여기

<body class="home blog custom-background"> 
<div id="container"> 
    <?php include('includes/header.php'); ?> 
    <?php include('includes/outer_nav.php'); ?> 
    <div id="main-fullwidth"> 
<section style="display:block; overflow: hidden; border: 0px; padding:0px; "> 
    <aside style="display:block; float: left; width: 180px; "> 
     <?php include('includes/left_sidebar.php'); ?> 
    </aside> 
    <div style="margin-left:180px;"> 
     <?php include('includes/inner_header.php'); ?> 
<!-- CONTENT STARTS HERE --> 
<!-- CONTENT ENDS HERE --> 
    </div> 
</section> 
    </div><!-- #main-fullwidth -->

이 outer_nav.php이다 ("clearfix"를 포함) 광고.

Internet Explorer의 "clearfix"이후에 "main-fullwidth"가 올바르게 시작되지 않고 대신 같은 위치에서 시작되는 것으로 보입니다. 이로 인해 광고가 왼쪽으로 정렬하려고 시도하지만 탐색 메뉴 오른쪽에서 왼쪽으로 정렬됩니다.

질문이 있거나 더 자세한 정보가 필요하면 알려주십시오. 이것은 과거에는 효과가 있었지만 최근에는 업무가 중단되었습니다. 고맙습니다!

출처

2012-11-13 thePITman

사용중인 html5 태그 중 일부가 문제를 일으키는 것 같습니다. aside 태그는 IE9-에서 레이아웃을 위반하는 요소 중 하나 인 것 같습니다. 나는 좋은 오래되었던 잠수로 그것을 되돌려 줬다. 그리고 그것은 그것을 <section>에 뒤로 놓았다. 일관되게 보이게하려면 IF IE 조건부 CSS를 만들어야합니다. 행운을 빕니다.

IE에서 F12 키를 눌러 디버깅하십시오.

다음은 사진입니다.

enter image description here

출처

2012-11-13 03:43:55 andrewk

감사합니다. ASIDE를 DIV로 변환하면서 변경했습니다. index.php의 코드와 inner_header.php (둘 다 ASIDE 태그 사용)을 수정했습니다. 그러나 레이아웃과 관련된 문제가 계속 발생합니다. 팀 목록이있는 표가 이제 광고 오른쪽에 올바르게 정렬되어 있지만 광고 자체가 그 아래가 아닌 탐색 메뉴 옆에 너무 높습니다. "섹션"이 유효한 태그입니까? – thePITman

'section'은 html5의 유효한 태그입니다. 대부분의 오래된 브라우저는 태그를 렌더링 할 수 있지만 HTML5를 지원하지 않습니다. 나는 당신이 만들고있는 것이 그것들과 함께 제공 될 수 있기 때문에'divs li 's spans tables '만을 사용하여 안전하게 플레이 할 수있다. – andrewk

앤드류크, 도와 주셔서 감사합니다. 그 팁은 내 레이아웃을 정리하는 데 도움이되었습니다. 이 주제에 대한 별도의 응답으로 특정 질문에 해결책을 게시했습니다. IE9 이하에서는 ": after"스타일이 지원되지 않으므로 "clear : both;"를 적용해야했습니다. "main-fullwidth"DIV에 인라인 스타일을 사용합니다. – thePITman

(A CSS 전문가의 동료와 이야기) 추가 연구 후에는 같은 절, 심지어 스타일로 "CSS3"태그 같은 소리 ": 후"IE9과에서 지원되지 않습니다 아래에서 IE10이 정상적으로 작동하는 이유를 설명합니다. 내 "main-fullwidth"DIV에 본질적으로 적용되는 스타일 중 하나는 "분명 : 둘 다"입니다. 그러나 해당 속성은 ": after"스타일에 있었기 때문에 IE에 적용되지 않았습니다.

그래서 "clear : both;"를 추가했습니다. "main-fullwidth"DIV에 대한 인라인 스타일로서, 이제는 "overlaying"과 반대되는 "clearfix"의 뒤/아래에서 시작됩니다.

이것은 당면한 질문을 해결합니다. Chrome/Firefox는 ": after"스타일과 같은 "CSS3"을 읽을 수 있지만 IE에서는 ": after"를 인라인 스타일을 사용하여 직접 적용해야했습니다.

크롬에서는 작동하지만 IE에서는 작동하지 않는 스타일을 적용하는 것과 관련된 다른 문제 (예 : 너무 길게 패딩을 표시하는 마우스 오버 링크)는 여전히 있지만이 특정 질문과 관련이 없습니다.

출처

2012-11-13 17:44:16 thePITman

Internet Explorer에서만 DIV 정렬 문제 발생

답변

관련 문제