1

レイアウトテンプレートのヘッダーセクションに3列（固定-液体-液体）のヘッダーを作成しようとしていASP.NET MVC4ますが、IE6 +、Chrome、FFなどでうまく機能しません。

具体的には、次のように表示する必要があります

 |--------------------------------------|
 | wrapper                              |
 | |---------| |----------| |---------| |
 | | left    | |   title  | | right   | |
 | |---------| |----------| |---------| |
 |--------------------------------------|

（IE6とIE7をサポートする必要があることを除けば）欠点は、ウィンドウが500pxより小さくなったときにラッピングを行う必要があるということです。のように見えます。このラッピングは、メディアクエリをサポートできるブラウザでのみ発生する必要があります。（したがって、IE <9の場合、サイズを小さくすると、上記の例の「タイトル」を押しつぶすことができます）。

 |--------------------------------------|
 | header-wrapper                       |
 | |---------|              |---------| |
 | | left    |              | right   | |
 | |---------|              |---------| |
 |                                      |
 | |----------------------------------| |
 | |              title               | |
 | |----------------------------------| |
 |--------------------------------------|

これが私がこれまでに持っているCSSです

.content-wrapper {
    margin: 0 auto;
    max-width: 1140px;   
}
.header-wrapper {
    text-align: center;
    vertical-align: text-bottom;
}
.header-left-box {
    float: left;
    width: 160px;
}
.header-right-box {
    float: right;
    margin:auto;    
}
.header-center-box {
    min-width: 200px;
    background:none;
    margin:auto;
    width:50%;
    padding: 4px;
}
.site-logo
{
    background-image:url('/Content/images/logo.png');
    background-repeat: no-repeat;
    background-position: top left;    
    display:block;        
    width:130px;
    height:80px;    
    margin-bottom: 5px;
}

そしてここにMVC4テンプレートの関連部分があります

<header>
    <div class="content-wrapper header-wrapper">
        <div class="header-left-box">
            <div class="site-logo"></div>      
        </div>
        <div class="header-right-box">
            <nav>
                <ul id="menu"><li>Quit</li></ul>
            </nav>               
        </div>                        
        <div class="header-center-box">
            <p>title</p>
        </div>
    </div>
</header>

CSSとHTMLを活用するソリューションがいいと思います。

4

2 に答える 2

1

Jasonの回答に加えて、ブラウザー固有のコーディングまたはスタイルシートに関しては、IE以外のブラウザーにjavascriptを使用できます。

if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1) {
    document.write('<link rel="stylesheet" type="text/css" href="style-ch.css" media="all" />');
}

と同様<!--[if IE 6]><![endif]-->に、これは、使用されているブラウザが指定されたブラウザである場合にのみ、いくつかのコードを実行します（上記の例では、クロム固有のスタイルシートをロードします）。

もちろん、次のようにブラウザのバージョンを指定することもできます。 .indexOf('chrome 11')

通常/クロスブロワースタイルシートを宣言した後にこのコードが宣言されていることを確認してください。宣言されていない場合、機能しない可能性があります。

IE6とIE7は本当に古いので、なぜ最適化するのが面倒なのかわかりません。しかし、それはもちろんあなたの個人的な選択です:)

于 2013-03-27T18:51:43.900 に答える
0

質問で提供されたコードは、IE6とIE7を除いて、私が必要とするすべてのもので機能します。

元のbodyタグを置き換えるために、レイアウトに次のものを追加することにしました。

<!--[if IE 6]> <body class="ie6"> <![endif]-->
<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if gt IE 7]><!--> <body> <!--<![endif]-->

これで、質問ですでに定義されているスタイルに加えて、次のスタイルを使用できます。

.ie6 .header-wrapper,
.ie7 .header-wrapper {
    text-align: center;
    vertical-align: text-bottom;        
    height: 85px;
}

.ie6 .header-left-box,
.ie7 .header-left-box {    
    float: left;
    width: 25%;
    height: 82px;
}

.ie6 .header-right-box,
.ie7 .header-right-box {
    float: right;
    width: 25%;
    height: 82px;
    text-align: right;    
}

.ie6 .header-center-box,
.ie7 .header-center-box {    
    padding: 4px;       
    margin-left: 26.2%;
    margin-right: 26.2%;
    width: 40%;
}

これにより、IE6およびIE7での列の折り返しを含め、すべてのブラウザーで列を実行するために必要なすべてが処理されます。

于 2013-03-27T15:58:48.953 に答える