3

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

  • 绝对定位的包装器
  • 一个灵活的宽度（这里设置为 90%，还有最大和最小宽度）
  • 39px 的顶部（占横幅）

假设，我可以对 IE7 进行 hack，达到以下程度：

*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 来阐明一些整体设计。

谢谢您的帮助。

4

1 回答 1

0

尽管您提到不想使用 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]-->
于 2013-09-10T09:10:54.747 回答