网站侧边栏在较旧的 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; 来快速修复它。 code>，如下所示：

#inner_wrapper {
  display:inline-block;
}

删除 float:left 属性，您的侧边栏将再次出现。

Answer 2

我相信旧版本的 IE 不支持 position:fixed; 这是（至少部分）导致消失的原因。

您可以在此处找到创建多列布局的跨浏览器方式： http://www.alistapart.com /文章/假列/