我不是一个 css 人，我已经尝试过自己调试这个问题，但我似乎无法弄清楚如何解决我的问题。我有包含两个 div 的 jqUI 模态窗口。一个 div 保存搜索字段，另一个保存包含结果的 jqGrid。第一个网格里面有 jquery UI 选项卡。第一个 div 似乎表现良好，但第二个 div 似乎与 IE 8、firefox 和 chrome 中的第一个 div 重叠。
我有两个 div 的课程... float-left 和 main-content。在 IE9 中它看起来有点像这样......
在我在其他浏览器中测试我的网站之前，我什至没有意识到这是一个问题（我知道大错特错，我应该在 firefox 或 Chrome 中开发。经验教训）。无论如何，在 IE 9 上它看起来像这样......
这就是我期望的样子。所以我显然在不同的浏览器中遇到了一些 css 重叠和行为不同的问题。我相信我在适当的 css 文件中隔离了适当的行...
我绝对不明白为什么两个 div 一直重叠。我需要弄清楚如何阻止这种情况，但更糟糕的是标题的高度。它似乎从另一个 div 的高度开始排队。它们似乎是相互关联的......如果你看看我打开另一个标签时会发生什么，你可能会明白我的意思......关于我如何解决这个问题的任何想法。如果您有任何见解，那就太好了。正如我所说，我对 CSS 不是很好，但如果你有任何想法，你可能会启动创作过程......
更新
这是我需要正确处理的div...
<div id="searchPatient" class="float-left ui-tabs ui-widget ui-widget-content ui-corner-all">
那将是带有搜索字段的第一个 div 的 div 定义......
那将是第二个 div 的 div 定义。下面有几个 div，其中包括他们的类。下面是每个 css 类中每个 css 的 css（我从 chrome 开发工具中得到它们，所以我可以看到应用了什么，什么没有应用）......
.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 并设置它的高度？
好的...这就是当我将其中一个 div 设置为向左浮动而另一个向右浮动时得到的...
像往常一样ie8看起来不错。我怎样才能让它们看起来像在 ie9 示例中一样。