DIV 的 IE7 问题，子 div 宽度取自父级！它在 IE9 中运行良好，但 IE7 显示垂直堆叠的子 div 和父 div 的 100% 宽度。IE9 显示子 div 首先水平堆叠，然后根据需要显示到第二行，它们是子 div 宽度的 100%，具体取决于内容。
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-image: url(/CIRCUITS/framework/Images/masterpagedefault/bg_texturedphoto.jpg);
background-repeat: repeat;
}
.menuItems
{
list-style-image: none;
list-style-type: none;
padding:5px 10px 10px 10px;
margin: 0px 0px 0px 0px;
}
.menuItemHeader {
background-color: #272727;
padding: 5px 20px 5px 5px;
margin: 10px 10px 0px 10px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: white;
text-align: left;
border-top: 1px;
border-left: 1px;
border-bottom: 0px;
border-right: 1px;
border-style: solid;
border-color: #666;
}
.menuItemHeader2 {
background-color: #272727;
padding: 5px 5px 5px 5px;
margin: 0px 0px 0px 0px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: white;
text-align: left;
border-top: 1px;
border-left: 1px;
border-bottom: 0px;
border-right: 1px;
border-style: solid;
border-color: #333;
}
.menuItemContainer2 {
background-image: url(/CIRCUITS/framework/Images/masterpagedefault/dropshadow.png);
background-repeat: repeat;
padding: 5px 5px 5px 5px;
margin: 0px 0px 0px 0px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: white;
text-align: left;
border: 1px;
border-style: solid;
border-color: #333;
vertical-align:top;
}
.menuItemContainer {
background-color: #333;
padding: 0px 0px 0px 0px;
margin: 0px 10px 0px 10px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: white;
text-align: left;
border: 1px;
border-style: solid;
border-color: #666;
}
.menuFramework2 {
background-image: url(/CIRCUITS/framework/Images/masterpagedefault/HSubmenuBG.png);
border-top: none;
border-left: solid;
border-left-color: black;
border-left-width: 1px;
border-bottom: solid;
border-bottom-color: black;
border-bottom-width: 1px;
border-right: solid;
border-right-color: black;
border-right-width: 1px;
visibility: hidden;
position: absolute;
top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: white;
}
.menuFramework {
background-image: url(/CIRCUITS/framework/Images/masterpagedefault/HSubmenuBG.png);
border-top: none;
border-left: solid;
border-left-color: black;
border-left-width: 1px;
border-bottom: solid;
border-bottom-color: black;
border-bottom-width: 1px;
border-right: solid;
border-right-color: black;
border-right-width: 1px;
visibility: hidden;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: white;
}
.MainMenu {
background-image: url('/CIRCUITS/framework/Images/masterpagedefault/dropshadow.png');
border-top-width: 0px;
border-left: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 2px solid transparent;
visibility: hidden;
position: absolute;
width: 1009px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: white;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
top: 55px;
}
.menulinks {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: white;
outline: none;
text-decoration: none;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: white;
outline:none;
}
a:link {
text-decoration: none;
outline:none;
}
a:visited {
text-decoration: none;
color: white;
outline:none;
}
a:hover {
text-decoration: none;
color: #99ccff;
outline:none;
}
a:active {
text-decoration: none;
outline:none;
}
</style>
<script language="javascript" type="text/javascript">
function MM_preloadImages() { //v3.0
var d = document; if (d.images) {
if (!d.MM_p) d.MM_p = new Array();
var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++)
if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }
}
}
function On(objMenuButton, objMenu, TopOffset, LeftOffset, imgButton) {
if (objMenu.style.visibility == "visible") {
return;
}
//alert(document.getElementById("divER").style.clientLeft);
//alert(document.getElementById("divER").clientLeft);
//return;
//alert(objMenuButton.offsetTop);
objMenu.style.visibility = "visible";
//objMenu.style.left = (objMenuButton.offsetLeft + LeftOffset) + "px";
//alert(objMenu.offsetLeft);
//alert(objMenu.style.bottom);
//objMenu.style.top = (objMenuButton.offsetTop + objMenuButton.offsetHeight + TopOffset) + "px";
//this.divER.style.left.
//alert("bot:" + (parseInt(ImgHeight) + parseInt(TopOffset) + 0));
//alert(objMenuButton.style.height);
//alert(objMenu.style.left);
//alert(objMenuButton.offsetLeft);
imgButton.src = "/CIRCUITS/framework/Images/masterpagedefault/HMenuUA_On.png";
}
function Off(objMenu, imgButton) {
//alert(event.srcElement.id + " " + objMenu.id);
//alert(objMenu.id);
imgButton.src = "/CIRCUITS/framework/Images/masterpagedefault/HMenuUA.png";
objMenu.style.visibility = "hidden";
}
</script>