웹 사이트 오래된 인터넷 익스플로러 버전에 사이드 바가 표시되지 않음

Question

무슨 문제인지 모르겠지만 내 웹 사이트의 사이드 바가 IE의 이전 버전 (IE9 호환성보기에서 테스트 됨)에 표시되지 않습니다. 이 페이지는 다음 언어로 제공됩니다 : http://freshbeer.lv/development/en

최신 브라우저에서는 페이지 왼쪽의 갈색 사이드 바를 볼 수 있지만 이전 IE에서는 볼 수 없습니다.

누구든지 문제에 대한 해결책을 제안 할 수 있습니까? 사이드 바 사이드 바의

---

HTML

<!-- sidebar --> 
     <div id="sidebar"> 
      <!-- logo --> 
      <div id="logo"><h1>Bryuvers</h1></div> 
      <!-- navigation --> 
      <div id="navigation"> 
       <ul id="nav"> 
        <li style="margin: 0;"><a id="current" href="index.php" >Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Production</a></li> 
        <li><a href="contact.php">Contact</a></li> 
       </ul> 
      </div> 
      <!-- search --> 
      <br /> 
      <br /> 
      <div id="search"> 
       <form id="searchForm" method="post"> 
       <fieldset> 
       <input id="s" type="text" placeholder="Search" /> 
       <input type="submit" value="Submit" id="submitButton" /> 
       </fieldset> 
      </form> 
      </div> 
      <div id="footer">&copy; Bryuvers - <?php echo date("Y"); ?></div> 
     </div> 
     <!-- sidebar_strip --> 
     <div id="sidebar_strip"></div> 

CSS

#sidebar { 
    height: 100%; 
    width: 300px; 
    position: fixed; 
    float: left; 
    background: url("../images/sidebar_bg.png") repeat-y #2a1708; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    filter: alpha(opacity=70); 
    opacity: 0.7; 

    -webkit-transition: 0.45s; 
    -moz-transition: 0.45s; 
    -o-transition: 0.45s; 
    -ms-transition: 0.45s; 
    transition: 0.45s; 
} 

#sidebar:hover { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 

#sidebar_strip { 
    height: 100%; 
    position: fixed; 
    margin: 0 0 0 300px; 
    width: 10px; 
    float: left; 
    background: url("../images/sidebar_cover.png") repeat-y #866a3f; 
} 

---

는 적어도 IE7에서 작동 그래서 어떻게 든 내 코드를 편집 할 수있는 타당성이 있는가 ?

Answer 1

http://www.alistapart.com/articles/fauxcolumns/가 IE에서 이상한 특질처럼 소리를, 당신은 신속하게 #inner_wrapperdisplay:inline-block; 대신 float:left;, 그래서 등을 설정하여 문제를 해결할 수 있습니다 :

#inner_wrapper { 
    display:inline-block; 
} 

는 float:left 속성을 제거하고 사이드가 다시 나타납니다.

Answer 2

저는 IE의 이전 버전이 (적어도 부분적으로) 실종의 원인이되는 position: fixed;을 지원하지 않는다고 생각합니다.

현재 다중 열 레이아웃 만드는 크로스 브라우저 방식으로 찾을 수 있습니다