なぜHTMLページの本文は、EdgeとIEでは全幅に拡張されませんが、ほかのすべてのブラウザでは大丈夫ですか？

Question

私はwebpageを開発中です。内容を忘れましょう。それは関係ありません。 Chrome、Safari、Firefoxではうまく見えますが、EdgeやInternet Explorerでは全幅に拡張されません。

私は（jQueryのの助けを借りて）自分のコンソールで書く場合

$('body').width($(window).width()) 

ボディはフルスクリーン幅に拡張し、再びokです。私はコンソールを介してページをデバッグしようとしていましたが、理由を見つけることができませんでした。

リファレンスのページのDOMがソースとして機能します。

これは、画面の幅が990を超えている（私が使用するメディアクエリのために）場合にのみ発生します。

Answer 1

html要素に適用されているCSSセレクタ.svgは、display: inline-block;のインライン要素であることを示しています。 displayプロパティを.svgから削除するか、値をblockに変更すると、ページがブラウザのビューポートに適切に表示されます。

問題のCSSセレクタ。私はあなたを伝えることができるものから、

.svg { 
    display: inline-block; /* <= the problem */ 
    background: 0 0; 
    border: none; 
} 

は、いくつかの特徴検出を行うためにModernizrを使用していて、それがhtmlに.svgクラスを追加して、あなたはModernizrはhtmlに.svgを追加したことを知らない他の目的のために.svg独自に作成します。

上記が真の場合は、CSSセレクタを変更/名前変更/上書きします。変更/名前を変更した場合、最初に.svgを使用した要素を更新します。