網站邊欄不顯示舊的Internet Explorer版本

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

聽起來像在IE中一個奇怪的怪癖，你可以快速設置你的#inner_wrapper到display:inline-block;而不是float:left;，像這樣解決這個問題：

#inner_wrapper { 
    display:inline-block; 
} 

刪除float:left屬性，並再次出現側邊欄。

Answer 2

我相信老版本的IE不支持position: fixed;這是（至少部分）是什麼導致失蹤。

你可以找到創建多列布局在這裏的一個跨瀏覽器的方式：http://www.alistapart.com/articles/fauxcolumns/