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/

网站边栏不显示旧的Internet Explorer版本

2 个答案: