0

.net アプリケーションで奇妙な動作が発生しています。IE8 の Visual Studio 内から実行すると、問題なく表示されます。

ここに画像の説明を入力

しかし、アプリケーションをサーバーにデプロイして URL 経由でアクセスすると、マージンが失われるようです。

ここに画像の説明を入力

同じブラウザの同じバージョンで実行されている同じアプリケーションですが、なぜこの違いが生じるのでしょうか?

これが私のCSSです（ロゴはクラス「ロゴ」にあります）：

body {
    font-family: Helvetica, sans-serif;
    background-color: #aaa;
    margin: 0px;
    line-height: 1.5rem;
}

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


/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}


img,
embed,
object,
video {
    max-width: 100%;
}

.header {
    background-color: #ffffff;
    color: #98BF79;
    overflow:auto;
}

.logo {
    float: left;
    height: 60px;
    width: 60px;
    margin: 1.625em;
}

    .logo img {
        max-width: 100%;
    }

.nav {
    padding-left: 1.625em;
    padding-right: 1.625em;
    float: right;
    margin-top: 3.5625em;
}

    .nav ul {
        list-style: none;
        margin-bottom: 1.625em;
    }

    .nav li {
        margin-right: 1.6em;
        float: left;
    }

    .nav a {
        text-decoration: none;
        color: #98BF79;
    }

        .nav a:link {
            color: #98BF79;
        }

        .nav a:hover {
            color: #f90;
        }

        .nav a:focus {
            color: #f90;
        }

.container {
    max-width: 50em;
    padding-left: 1.625em;
    padding-right: 1.625em;
    color: #fff;
}

    .container a {
        color: #fff;
        text-decoration: none;
    }

        .container a:hover {
            color: #f90;
        }

        .container a:focus {
            color: #f90;
        }

    .container h1 {
        font-size: 3rem;
        line-height: 2.6rem;
        margin-bottom: 1.625rem;
    }
    .container .footnote {
        font-size: .7rem;
        font-style:normal;
    }


.input {
    max-width: 100%;
    height:20em;
    padding-top: 0.8125em;
    padding-right: 0px;
    padding-bottom: 0.8125em;
    padding-left: 0.325em;
}
.table {
    margin:0px;padding:0px;
    width:25em;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #ffffff;

}.table table{
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}



.table td{
    vertical-align:middle;

    background-color:#aaa;

    border:1px solid #ffffff;
    border-width:0px 0px 0px 0px;
    text-align:center;
    padding:9px;
    font-size:14px;
    font-family:Helvetica;
    font-weight:normal;
    color:#ffffff;
}


@media only screen and (max-width: 40em) {

    .nav {
        clear: left;
        float: left;
        margin-top: 0;
    }

        .nav ul {
            padding-left: 0px;
        }

        .nav li {
            float: none;
        }
}
4

1 に答える 1

2

これについて私が考えることができる最も可能性の高い理由は、localhost を使用してサイトを開いたときにサイトがイントラネット モードで実行され、Web サーバーに展開するとイントラネット モードがオフになっているため、スタイルが壊れていることです。

これをテストする 1 つの方法は、サイトをイントラネット サイトに配置することです。これには、[ツール] -> [インターネット オプション] に移動し、[セキュリティ] -> [イントラネット] を選択し、[サイトと詳細オプション] をクリックして、サイトの URL をリストに追加します。これにより、デプロイされたサイトが適切にレンダリングされます。

これは、イントラネット モードが既定で互換モードを有効にし、このモードが Internet Explorer 7 の時点でページをレンダリングするためです。また、単純に、互換モードが localhost に対して有効になっていて、展開された Web サイトに対して有効になっていない可能性もあります。

この後、サイトが適切に表示される場合は、スタイル シートを見直して、イントラネット モードまたは互換モードなしで適切に表示されるようにすることをお勧めします。

編集：

あなたの問題が逆であることに興味がありますが、Compatibilty Mode を回避するには、この回答を確認してください:タグを使用して IE 互換モードを強制的にオフにする

于 2013-08-23T17:54:27.787 に答える