私はあまり CSS に詳しくないので、自分でこの問題をデバッグしようとしましたが、問題を解決する方法がわかりません。2 つの div を保持する jqUI モーダル ウィンドウがあります。1 つの div は検索フィールドを保持し、もう 1 つは結果を含む jqGrid を保持します。最初のグリッドには、内部に jquery UI タブがあります。最初の div は正常に動作しているように見えますが、2 番目の div は IE 8、firefox、および chrome の最初の div と重なっているようです。
float-left と main-content の 2 つの div のクラスがあります。IE9では、これに少し似ています...
他のブラウザーで自分のサイトをテストするまで、これが問題であることに気付きませんでした (私は大きな間違いを知っています。Firefox または Chrome で開発する必要があります。教訓)。とにかく、IE 9では次のようになります...
これは、私がそれがどのように見えるかを期待していたものです. そのため、いくつかの css が重複し、異なるブラウザーで異なる動作をするという問題が明らかに発生しています。適切なcssファイルに適切な行が分離されていると思います...
2 つの div が重複し続ける理由がまったくわかりません。それを止める方法を考え出す必要がありますが、さらに悪いのはヘッダーの高さです。他のdivの高さからキューがかかるようです。それらはリンクしているように見えます... 別のタブを開いたときに何が起こるかを見てみると、私の言いたいことがわかるかもしれません... これを回避する方法についてのアイデア。何か洞察力があれば、それは素晴らしいことです。私が言ったように、私は CSS が得意ではありませんが、アイデアがあれば、創造的なプロセスを開始することができます...
アップデート
ここに私が正しくする必要があるdivがあります...
<div id="searchPatient" class="float-left ui-tabs ui-widget ui-widget-content ui-corner-all">
それは、検索フィールドを持つ最初の div の div 定義になります...
これが 2 番目の div の div 定義になります。その下にいくつかの div があり、それらのクラスが含まれています。以下は、各cssクラスのそれぞれのcssです（chrome devツールから取得したので、適用されているものと適用されていないものを確認できます）...
.main-content {
background: url("../images/accent.png") no-repeat;
padding-left: 10px;
padding-top: 30px;
}
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-tabs {
position: relative;
padding: .2em;
zoom: 1;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-jqgrid {
position: relative;
font-size: 11px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-khtml-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-khtml-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
-khtml-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px;
border-top-left-radius: 4px;
}
.ui-widget-content {
border: 1px solid #AAA;
background: white url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
color: #222;
}
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: 1.1em;
}
div[Attributes Style] {
direction: ltr;
unicode-bidi: embed;
}
.ui-jqgrid .ui-jqgrid-view {
position: relative;
left: 0px;
top: 0px;
padding: .0em;
font-size: 11px;
}
.ui-jqgrid .ui-jqgrid-titlebar {
padding: .3em .2em .2em .3em;
position: relative;
border-left: 0px none;
border-right: 0px none;
border-top: 0px none;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
-khtml-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px;
border-top-left-radius: 4px;
}
.ui-widget-header {
border: 1px solid #671966;
background: #881B6F url(images/ui-bg_highlight-soft_75_881b6f_1x100.png) 50% 50% repeat-x;
color: #671966;
font-weight: bold;
}
多いようです。また、かなりの重複があるようです。私は現在、それをすべて正すために取り組んでいます。
<div id="searchPatient" class="float-left">
</div>
<div class="content-wrapper main-content clear-fix">
<table id="list" class="scroll"></table>
</div>
<div id="resultDiv"></div>
投稿するとコードが変形する理由がわかりません。しかし、クラスが浮動小数点である最初のdivにピクセルを設定しようとしました。それは機能しますが、div が重なっている理由と、最初の div の周りの境界線が消える理由を理解する必要があります。おそらく固定レベルに設定したからでしょう。たぶん、別の div を別の div にラップして、その高さを設定できますか?
OK...これは、divの1つを左にフロートし、もう1つを右にフロートするように設定すると得られるものです...
いつものようにie8は問題ないようです。ie9の例のように、それらを一緒に見せるにはどうすればよいですか。