3

HTML と CSS がいくつかあり、どちらも IE8 以降で動作します。ただし、IE7 では、これは機能しません。ラッパーを中央に配置するのではなく、左側に配置します。このCSSは質問の最小量ですが、私が持っているいくつかの要件は次のとおりです。

  • 絶対配置ラッパー
  • 柔軟な幅 (ここでは 90% に設定されており、最大幅と最小幅も同様です)
  • 上部 39 ピクセル (バナーを考慮して)

仮説として、私は 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 を追加しました。

助けてくれてありがとう。

4

1 に答える 1

0

IE7ハックを使用したくないと述べていますが、スタイルシートを追加せずにIE7のみのスタイルを作成する有効な方法を次に示します。これにより問題が解決し、次のコードを追加します

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

通常のhtmlタグの代わりに。

その後、次を使用できます。

.ie7 .css-selector {

ie7 のみの任意の要素をターゲットにします。

完全な開示のために、これは次のような条件付きコメントを使用する場合、つまりのすべてのバージョンで機能します。

<!--[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 に答える