IE9在尝试将div放在一起时导致布局破坏
我正在尝试找到一个解决方案，为什么在IE9中，我的布局被打破了，正如您将从附加的抓取中看到的那样。但是，在所有其他浏览器中，包含IE10，它会正确显示。我花了两天时间试图找到解决这个问题的方法，并尝试了许多具有各种明确选择的方法。我用最小的css将我的代码剥离到裸露的骨架，但找不到修复这个破坏的布局的方法。
有人可以告诉我我哪里出错了，因为我很难尝试对它进行排序。非常感谢。
破坏IE9布局
更正IE10布局
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> ie9 test page</title>
<link href="cp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TopColumn">
<br /><br />
<span class="setsName">Hello, <?php echo $_SESSION['kt_name_usr']; ?></span>
<br /><br />
<span class="setSubTitle">Welcome to the Logistor customer control panel.</span>
</div>
<br />
<div id="cpContainer">
<div id="settingsDiv">
<p>
<span id="setHeader">Settings</span>
<span id="setHeaderRight" class="tooltip" title="Close"></span>
</p>
<hr />
<div id="setsTitle">
<div id="setContainerDiv" style="float:left; width: 100%; margin: 30px 0 44px -6px; font-size: 11px; text-align: center; color: #A8A8A8 !important;">
<div id="setIconLeft" style="float:left; width: 32%; margin: 0 0 0 -10px;">
<a href="#"><img src="images/smlDeptIcon.png" height="48" width="48" class="tooltip" title="This is the dept" id="setDept"></a><br />Departments
</div>
<div id="setIconMid" style="float:left; width: 33%; margin: 0 0 0 0;"">
<a href="#"><img src="images/smlProfileIcon.png" height="48" width="48" class="tooltip" title="This is the profile" id="setProfile"></a><br />Profile
</div>
<div id="setIconRight" style="float:left; width: 33%; margin: 0 0 0 0;">
<a href="#"><img src="images/smlChgPassIcon.png" height="48" width="48" class="tooltip" title="This is the pass" id="setPass"></a><br />Change Password
</div>
</div>
</div>
<br />
</div>
<div id="DestructionDiv">
<p><span id="destHeader">Destruction</span></p>
<hr />
<div id="DestructTitle">
<div id="destContainerDiv" style="float:left; width: 100%; margin: 30px 0 44px -6px; font-size: 11px; text-align: center; color: #A8A8A8 !important;">
<div id="destIconLeft" style="float:left; width: 33%; margin: 0 0 0 -10px;">
<a href="#"><img src="images/smlDestructIcon.png" height="48" width="48" class="tooltip" title="destruction schedule administration" id="destSchedule"></a><br />Schedule
</div>
<div id="destIconMid" style="float:left; width: 33%; margin: 0 0 0 0;"">
<a href="#"><img src="images/destCertIcon.png" height="48" width="48" class="tooltip" title="Destruction Certificates. Coming Soon" id="setDestCert"></a><br />Certificates
</div>
<div id="destIconRight" style="float:left; width: 33%; margin: 0 0 0 0;">
<a href="#"><img src="images/batchDestIcon.png" height="48" width="48" class="tooltip" title="Batch destroy boxes. Coming Soon" id="setBatch"></a><br />Batch Destruction
</div>
</div>
</div>
</div>
</div>
</body>
CSS
#cpContainer {
background-color: #f0f0f0;
float:left;
width: 96%;
border: 1px solid #ccc;
margin-left:30px;
margin-top: 10px;
margin-bottom: 70px;
-wekbit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}
#settingsDiv {
background-color: #fff;
float:left;
width: 35%;
border: 1px solid #ccc;
margin:10px 10px;
-wekbit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
background-image: url("../images/settingsIcon32.png");
background-repeat: no-repeat;
background-position: 20px 7px;
clear:right;
}
#DestructionDiv {
background-color: #fff;
float:left;
width: 35%;
border: 1px solid #ccc;
margin:10px 10px;
-wekbit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
background-image: url("../images/DestructIcon.png");
background-repeat: no-repeat;
background-position: 20px 7px;
}
#FilesDiv {
background-color: #fff;
float:left;
width: 35%;
border: 1px solid #ccc;
margin:10px 10px;
-wekbit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
background-image: url("../images/file_icon_32.png");
background-repeat: no-repeat;
background-position: 20px 7px;
}
#SideDiv {
background-color: #fff;
float:left;
width: 24%;
border: 1px solid #ccc;
margin:10px 10px;
-wekbit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
background-image: url("../images/ComeSoonIcon32.png");
background-repeat: no-repeat;
background-position: 20px 7px;
vertical-align:top;
}
#TopColumn {
background-color: #f3f3f3;
height:130px;
margin-top: -2px;
}
#setsTitle {
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
color: #a8a8a8;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 10px;
line-height: 30px;
}
div#setsTitle a {
/*color: #000;*/
text-decoration: none;
}
div#SideTitle a {
color: #000;
text-decoration: none;
}
#DestructTitle {
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
color: #a8a8a8;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 10px;
line-height: 30px;
}
#FilesTitle {
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
color: #a8a8a8;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 10px;
line-height: 30px;
}
#SideTitle {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #a8a8a8;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 10px;
line-height: 30px;
}
div#setsTitle a {
/*color: #000;*/
text-decoration: none;
}
div#SideTitle a {
color: #000;
text-decoration: none;
}
div#DestructTitle a {
/*color: #000;*/
text-decoration: none;
}
#setHeader{
width: 90%;
font-size: 20px;
margin: 0 0 20px 60px;
color: #3D80E4;
}
#setHeaderRight{
float:right;
margin-right: 20px;
margin-top: -5px;
height: 32px;
width: 33px;
cursor: pointer;
}
#destHeader{
font-size: 20px;
margin: 0 0 20px 60px;
color: #3D80E4;
}
#FilesHeader{
font-size: 20px;
margin: 0 0 20px 60px;
color: #3D80E4;
}
#sideHeader{
font-size: 20px;
margin: 0 0 20px 60px;
color: #3D80E4;
}
#setDeptShow{
width: 90%;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #a8a8a8;
margin-left: 30px;
margin-bottom: 40px;
}
#setProfileShow{
width: 90%;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #a8a8a8;
margin-left: 30px;
margin-bottom: 40px;
}
#setDestScheduleShow{
width: 90%;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #a8a8a8;
margin-left: 30px;
margin-bottom: 40px;
}
#setChgPassShow{
width: 90%;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #a8a8a8;
margin-left: 50px;
margin-bottom: 40px;
}
span.setsName{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 22px;
font-weight: bold;
color: #3d80e4;
margin-left: 34px;
}
span.setSubTitle{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 22px;
color: #a8a8a8;
margin-left: 34px;
}
hr {
border: 1px solid #e1e9f5;
background: #e1e9f5;
width: 90%;
height: 1px;
margin: 10px 0 1px 20px ;
}
img {
outline: none;
border: 0;
}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？