网站边栏不显示旧的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/