厳密モードでモーダル高さを修正できません。クォークモードは本当に悪いですか？

私は独立したプロジェクトに取り組んでいるバックエンド開発者ですので、それに続くかもしれない知識の不足をお許しください。私は、AdminLTEと呼ばれるフリーでオープンソースの管理パネルテンプレートを使用しています。また、その一部としてモーダルの束を使用しています。私はしばらくの間それに取り組んできましたが、doctypeが宣言されていないことに気付かなかった以外はすべてうまくいっていました。標準を使用して（私が知る限り）html5 strictモードを推奨します<!DOCTYPE html>私のすべてのモーダルが完全に壊れて境界をオーバーフローします。厳密モードでモーダル高さを修正できません。クォークモードは本当に悪いですか？

私はバックエンドの開発者であり、このトンネルの終わりに光が見えないので、私の質問は本当に悪いですか？私は最新のChrome、Mozilla、最新のAndroidでサムスンが使用しているものをテストしました。すべてがうまく機能しています。

しかし、これはルールに反しているので、ここでの主な質問は、クォークモードがまだ2016年の悪い練習とみなされているかどうかです。このトピックについてはどこでも投稿は数多くありますが、非常に新しいと我々はゆっくりとWindows XP & IEの古いバージョンを超えている、私は引数が異なるかもしれないように感じる。

モーダルは、POSTが必要な場合、jQueryのload()またはhtml()のいずれかを使用して、admins-modal-contentdivが埋め込まれます。

<div class="modal fade" id="admins-modal" tabindex="-1" role="dialog" aria-hidden="true"> 
<div class="modal-dialog c-modal-wrapper"> 
    <div class="modal-content bg-black" > 
     <div id="admins-modal-content"> 
      <div class="c-modal-topbar"> 
       <h4>Admins</h4> 
      </div> 

      <div id="admins-modal-contentdiv" class="c-modal-content"> 

      </div> 

      <div class="c-modal-bottombar"> 
       <a class="btn btn-app" onclick="$('#admins-modal').modal('toggle');"> 
        <i class="fa fa-arrow-left"></i> Back 
       </a> 
      </div> 
     </div> 
    </div> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

関連するCSSは、私はあきらめ、ちょうどQuirksモードと一緒に行くように感じる。この時点で<!DOCTYPE html>

でこの

.c-modal-wrapper{ 
    height:80%; 
} 

.c-modal-topbar{ 
    font-weight:bold; 
    padding: 0px 0px 20px 0px; 
    width:95%; 
    margin-left:auto; 
    margin-right:auto; 

} 

.c-modal-content{ 
    overflow-y:auto; 
    height:65%; 
    width:100%; 
} 

.c-modal-bottombar{ 

}

ませんDOCTYPE

のように見えますしかし、私はこのテンプレート/モーダル使用スタイルに依存したいのでureプロジェクトでは、標準に固執して最終的には壊れないようにしたいと思います。私はこれに数百時間の作業を費やしました。そして、私はそれがすべて無駄になるのを恐れています。

空き時間があり、見たい場合は、HEREの問題を示すサンプルページをチェックして、「Show Modal」をクリックしてください。 doctypeの宣言を一切行わずに期待通りに動作する例は、HEREです。 doctype宣言を除いて、ページは同じですが、両方とも同じCSSファイルとJSファイルを含んでいます。

もう一度ルールを破って申し訳ありませんが、私はどこにも向かないです。読んでくれてありがとう。

出典

2016-11-27 aron9forever

投稿したCSSは、あなたが画像に表示している結果を伝えません。表示するCSSは意図したとおりに動作するためです。表示されているオーバーフローは他のものによるものです。問題を示す実際の例を作成できない限り、サポートすることはできません。しかし、可視領域境界内にモダルを維持することは困難ではありません。 – junkfoodjunkie

@junkfoodjunkie私はすべてをウェブサイトからまっすぐにコピーしました。doctypeを追加/削除するのは画像と全く同じです。この例は私が提供したテストアカウントで利用可能ですが、今すぐ直接リンク可能なサンプルを作成して簡単にします。 – aron9forever

@junkfoodjunkie新しい簡単なアクセス例を追加して質問を更新しました。 http://hosting.r4ge.ro/test.php – aron9forever

さて、私は私の特定の問題を修正することができました。

モーダルのコンテンツが親の設定された高さをオーバーフローしていたことが起こっていました。 Quirksモードで何らかの理由でこの高さが尊重されました。私はまだ何が起こったのかは分かりませんが、あふれているコンテンツ（部分的に）が問題を解決する前にすべての親にheight:100%を設定してください。

私はフッターの終わりまで、黒い背景のストレッチを作るために最初の場所で両親からの高さを取り除くには、しかし100%高さを強制することにより、いくつかの余分な空きスペースがc-modal-bottombarクラス別名、私のフッターの下に現れました。これは私がdivの最初の部分にフッターを強制していないからです。たとえ私が行ったとしても、コンテンツはギャップを埋めるために伸びないので、結果は醜いでしょう。

誰かが同じような状況に遭遇した場合、可変サイズのヘッダー/フッターがある場合は、この方法ではできません。

私が望むように見えるようにしたのは、このようなモーダル全体を再描画することです。

<div class="modal fade" id="admins-modal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog c-modal-wrapper"> 
     <div class="c-modal-topbar bg-black"> 
      <div class="c-modal-topbar-content"> 
       <h4>Admins</h4> 
       To add a new admin, search for a player in 'Manage Players' and edit his rank. 
      </div> 
     </div> 

     <div id="admins-modal-contentdiv" class="modal-content bg-black c-modal-content"> 
     </div> 

     <div class="c-modal-bottombar bg-black"> 
      <a class="btn btn-app" onclick="$('#admins-modal').modal('toggle');"> 
       <i class="fa fa-arrow-left"></i> Back 
      </a> 
     </div> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal needs to be above adminranks for stacking modals to work -->

いくつかの役に立たないのdiv要素を除去し、そのクラスには、それはそうですが、私はこれは、少なくとも1人の他の人を助けることを願っていますので、これと読む人の時間1

.c-modal-wrapper{ 
    height:80%; 
} 

.c-modal-testing{ 
    height:100%; 
} 

.c-modal-topbar{ 
    width:100%; 
} 

.c-modal-topbar-content{ 
    width:95%; 
    margin-left:auto; 
    margin-right:auto; 
    font-weight:bold; 
} 

.c-modal-content{ 
    overflow-y:auto; 
    height:65%; 
    width:100%; 
} 

.c-modal-bottombar{ 

}

にマージ答えた人は無駄ではありません。

忘れてしまった（または私のqをロックしていない）ことをもう一度ありがとう。

出典

2016-11-28 21:53:39 aron9forever

は、次の2つのCSS-ルールを追加する必要があります。

モーダルの長さを制限し、モーダルの実際の下部に下のバーを配置

#serverconsole-modal-content { 
    height: 40em; 
} 
.c-modal-bottombar { 
    position: fixed; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

。

出典

2016-11-27 21:56:55 junkfoodjunkie

私は完全なウェブサイトにこれを適用しようとしましたが、ちょっと怪しいです（http://i.imgur.com/WIbhZm1.png）。私の電話ではそれはずっと悪いので、それは反応しません。すべてのモーダルがテキストコンテンツしか持っていないので、私はパーセンテージでそれを保持したいと思います。 – aron9forever

さて、 '.c-modal-bottombar' CSSは完全なコンテンツには必要ないと思われます。それが反応しない場合は、@ media-rulesを追加して反応させます。％が機能しない場合は、それを使用します。 – junkfoodjunkie

スタンダードモードとクォークスモードの最大の違いは、ボックスモデルです。標準モードに切り替えると、これはあなたを噛んで、あなたのモーダルを壊しているようです。

この特別な問題はCSSで簡単に処理されることが良いニュースです。スタンダードモードになっていても、ボックスモードを変えて使うことができるように、ボックスモデルを切り替えることができる標準のCSSプロパティがあります。

あなたはので、これはこれで有効にする必要があるすべて：それはあなたがする必要がある任意の要素に影響するよう

box-sizing: border-box;

は、あなたのスタイルシートにこのスタイルを追加します。これはちょうどあなたのモダールかもしれません、またはあなたのページ全体かもしれません。

私の質問は次のとおりです。クォークスモードは本当に悪いですか？

上記からわかるように、主な違いはよく定義されており、いずれのモードでも切り替えることができます。そういう意味で、そうではありません。

すべての主要ブラウザの最近のバージョンでは、標準化されているため、ほぼ同じモードを扱っています。完璧ではありませんが、それは受け入れられます。

しかし、quirksモードでは、特に旧式のブラウザでは他の意味があります。例えば、IE10以前を使用している人は、クォークモードボックスモデルを取得するだけでなく、古いIEバージョンのクワルクモードがIE5互換モードであるため、多くの他のブラウザ機能も無効になります。 IE11は、このモードとボックスモデルを変更するが、他のすべてを壊すことはありません第2のquirksモードをサポートしています。どの人があなたを得ようとしているかを知ることは必ずしも容易ではありません。

人々はこれらの古いIEバージョンを引き続き使用しています。つまり、サイトでクォークモードを使用すると、サイトの一部のユーザーが非常に悪い経験をすることになります。

他のブラウザの古いバージョンでも同様のことが起こる可能性があります。

クォークモードのものは、その名前にちょっとだけ暮らしているということです。奇妙なことがあります。サイトがそれを使用している場合は、いつあなたが本当にあなたになるのか分かりません。それらによってキャッチされた。標準モードへの切り替えが簡単なときは、なぜ誰がそれを使うのか正当化するのは難しいようです。古いシステムを維持しているかもしれませんが、確かに新しいコードではありません。

出典

2016-11-27 22:12:44 Spudley

私はQuirks Modeについて多くのことを読んできました。IE 6から8を5.5でエミュレートする方法は、それ以降はバージョン1をエミュレートするIEごとです。これが私の問題、互換性、そして今後のメンテナンス性に妥当な修正だとお考えですか？ – aron9forever

許容可能な修正は、標準モードと 'box-sizing：border-box'を使うことです。私はあなたができるならquirksモードを避けます（そして 'box-sizing'を避けるのは簡単です）。そして、IEの他の互換モードを避けてください。本当にひどいので、あなたはそれらを使う必要があると思っています。私の意見ではそれらを実際に無価値にする既知のバグ）。 – Spudley

まあ、試してみましたが、うまくいきません。最初に '.modal'クラスにプロパティを適用しようとしましたが、' html {box-sizing：border-box;} 'を追加しましたが、それでも動作しません。（見てくださいhttp://hosting.r4ge.ro/test.php） – aron9forever

厳密モードでモーダル高さを修正できません。クォークモードは本当に悪いですか？

答えて

関連する問題