web-dev-qa-db-ja.com

Internet Explorer 11の絶対位置決めエラー

Google Chrome、Firefox、Operaでは正しく表示されるページがありますが、Internet Explorer 11ではエラーが発生します。

不要な部分を取り除いたHTMLを次に示します。

<div class="container">
    <div class="page-content">
        <div id="corner"></div>
        ... page contents here
    </div>
</div>

CSSは次のとおりです。

.container {
    margin: 0;
    min-height: 100%;
    padding: 0;
}


.page-content::after {
    content: "";
    display: block;
    height: 1px;
}
.page-content {
    background: linear-gradient(137deg, transparent 121px, #ffffff 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin: 190px 100px 150px;
    max-width: 64em;
    padding: 10px 120px 145px;
    z-index: 2;
}
.page-content {
    margin: auto;
    max-width: 64em;
    padding: 0 1em 1em;
}

#corner {
    background-color: #ffffff;
    background-image: url("corner.png");
    display: block;
    height: 200px;
    left: 120px;
    position: absolute;
    top: 20px;
    width: 200px;
    z-index: -1;
}

このスクリーンショットでわかるように、＃corner要素は正しく配置されていません。

enter image description here

これはInternet Explorerに固有のものであるため、何を試すべきか本当にわかりません。過去数時間にわたってコードでさまざまなことを試してみましたが、これまでのところ運はありません。

csscss-positioninternet-explorer-11
24
Sherwin Flight

position:relative、div#corner、および/または.containerの要素に.page-contentを追加してみてください

含む要素のposition：relativeは、ページ全体ではなく、親要素に等しい絶対位置の要素の境界を設定します。

そのため、left:0pxの値はページの左上ではなく、親要素の左端に等しくなります。

これはie11でのみ発生しますが、これはかなり簡単な問題であるため、二次的な解決策が容易に存在するのではないかと疑わせますが、再び、IEただIEしゃぶり。

19
Rooster

これが他の人を助ける場合に備えて：

同様の問題がありました。 ie11は「正しい」プロパティを無視しているように見えました。

right: -320px;

しかし、「left」プロパティを次のように設定したことが原因であることが判明しました。

left: initial;

Ie11は「初期」キーワードをサポートしていません。

左：Internet Explorerでイニシャルが機能しない

5
costellofax

サイドノート：これがあなたがしようとしていることであるかどうかはわかりませんが、min-height:100%は、contentのサイズを画面の高さの100％にしません。これに置き換えます：

position:absolute;
top:0;
bottom:0;  
left:0;
right:0;

とにかく、#cornerに

position: absolute;
top: 20px;
left: 120px;

そして、ここでIEがページ全体に対して配置されます。他のブラウザでは、ヘッダーと比較して絶対的な位置になります。しかし、推測してください。おそらくposition: relative。

5
jaunt