Question

我有一些HTML和CSS，它们都可以在IE8及更高版本中运行。但是，在IE7中，这不起作用。它不是让包装器居中，而是位于左侧。这个CSS是问题的最小数量，但是我有以下一些要求：

绝对定位的包装
灵活的宽度（此处设置为90％，最大和最小宽度也是如此）
39px的顶部（代表横幅）

假设，我可以做到IE7黑客程度：

*left: 50%;
*margin-left: -45%;

但是，我不想......不管怎样，这是标记：

<!DOCTYPE html>
<html lang='en'>

<head>
    <style type="text/css">

        #banner-wrapper {
            position: absolute;

            top: 0;
            left: 0;
            right: 0;

            height: 39px; 
            width: 100%;
            min-width: 752px;

            background-color: rgb(95,95,95);
            z-index: 1;
        }

        #wrapper-main {
            position: absolute;

            top: 39px;
            left: 0;
            right: 0;
            bottom: 0;

            width: 90%;
            max-width: 1200px;
            min-width: 750px;
            min-height: 620px;

            background-color: lightblue;

            margin: 0 auto;
            overflow: hidden;
            z-index: 0;
        }

        #wrapper-left {
            position: absolute;

            top: 0;
            bottom: 0;
            left: 0;

            width: 180px;

            background-color: green;
        }

        #wrapper-content-container {
            position: relative;
            padding-left: 181px;
            height: 100%;

            top: 0;
            right: 0;
            left: 0;

            overflow-y: scroll;
            z-index: 0;
        }

        #wrapper-content {
            position: relative;

            min-height: 900px;
            width: 100%;
            z-index: 0;
        }
    </style>

</head>

<body>
    <div id="banner-wrapper"></div>
    <div id="wrapper-main">

        <div id="wrapper-left">THIS STAYS HERE</div>

        <div id="wrapper-content-container">
            <div id="wrapper-content">
               <!-- Scrollable content goes here -->
               THIS SCROLLS
            </div> 
        </div> 

    </div>

</body>
</html>

有没有办法让这项工作？相对定位的包装物在完整形式时严重影响设计，同样，固定宽度也是如此。我没有想法，但也许其他人知道一个可行的解决方案。

注意：我添加了更多HTML / CSS来澄清一些整体设计。

感谢您的帮助。

Answer 1

虽然你提到不想使用IE7 hack，这里是一种有效的方法，只创建IE7样式而不添加额外的样式表，这将解决你的问题，添加以下代码

<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if !(IE 7)]><!--> <html> <!--<![endif]-->

代替您通常的html标记。

然后您可以使用：

.ie7 .css-selector {

仅定位ie7中的任何元素。

对于完全公开，这适用于所有版本的ie，如果您使用条件注释，例如：

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->  
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->  
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->  
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->  
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

IE7中的等效CSS是什么？

1 个答案: