0

MVC-3 フレームワークを使用して Web サイトを設計しています。IE 互換モードが使用されていない場合、IE 互換モードは正しく表示され、次のようになります。

a

私が使用しているこのコードは次のとおりです。

<div id="header">
        <div id="title">                                 /* NUMBER 1 */
            <img src="@Url.Content("~/Content/A_picture.png")" />
        </div>
        <div id="menucontainer">                         /* NUMBER 2 */
            <ul id="menu">
                /* some menu items*/
            </ul>
        </div>
</div>
<div id="main">                                          /* NUMBER 3 */
   @RenderBody()
</div>

ある日、他のフォーマットの一貫性の問題のために、コードに IE7 を実行していると思わせる必要がありました。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

しかし今、これを強制すると、最初の Web サイトのレイアウトが壊れてしまいます。IE7 の強制を使用すると、次のようになります。

b

説明に付き合ってくれてありがとう。ここで私の質問 - IE7 のエミュレーションを強制しながら、壊れた div セクションを操作して最初の写真のように表示するにはどうすればよいですか?

どんな考え、アイデア、提案も大歓迎です。

編集：CSS

この問題を解決するのに役立つと思われる CSS の一部を以下に示します。申し訳ありませんが、明らかに最初にこれを含める必要がありました。

header,
footer,
nav,
section {
    display: block;
}

header, #header {
    position: relative;
    margin-bottom: 0px;
    padding: 0;
}

nav, 
#menucontainer {
    margin-top: 40px;
}

div#title {
    display: block;
    float: left;
    text-align: left;
}
4

3 に答える 3

1

を使用する必要があるかもしれません。vertical-alignつまり、次のように設定する必要があります。

#id_top_elements {
  display: table-cell; 
  vertical-align: bottom;
}

ただし、css を表示できる場合は、役立つかもしれません ;)

または、次のように試してみてください：

<!--[if lt IE 8]>
<style>
   #id_top_elements {
       position: relative; 
       top: -50%
   }
</style>
<![endif]–&gt;

しかし、トップ要素のラッパーを追加する必要があります。position: absolute;

于 2012-10-23T14:08:07.740 に答える
0

驚くべきことに、解決策は次のように#menucontainercssに1行追加することです。

nav, 
#menucontainer {
    margin-top: 40px;
    display: inline;
}

追加された行は「display：inline」で、図の2番目のdivに追加しました。

このトピックに参加してくれたすべての人に感謝します！

于 2012-10-23T18:51:51.647 に答える
0

フロートを使用する代わりに、使用することもできます

     display: inline-block; /*which works for most browsers including newer versions of ie, the following two lines are the fix for older versions of ie.*/
     *display: inline;
     zoom: 1;

別のオブジェクト/要素の隣に「座る」必要があるオブジェクト/要素でこれを行います

于 2012-10-23T14:29:12.593 に答える