我在悬停效果上做了一个简单的Javascript，所以当你悬停一个div时，文本会显示在下面的div中，但在IE7中只有一些随机的可以使用，例如1,2,3,4,27,28还有其他一些其他的东西不起作用？
这是我的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function menu (whichMenu,whatState){
if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState;}
else {document[whichMenu].visibility = whatState;}
}
function details(what){
myInfo={
"s1":"Flaunchin",
"s2":"Chimney stack",
"s3":"Ridge",
"s4":"Flashing",
"s5":"Barge board",
"s6":"Dormer",
"s7":"Water tabling",
"s8":"Purlin",
"s9":"Wall Plate",
"s10":"Rafters",
"s11":"Soffit",
"s12":"Insulation",
"s13":"Cold Water Storage Tank",
"s14":"Central Heating Header Tank",
"s15":"Felt and Battens",
"s16":"Slating or Tiling",
"s17":"Hip",
"s18":"Fascia or Eaves",
"s19":"Timber Stud Wall",
"s20":"Floor Joists",
"s21":"Hot Water Cylinder",
"s22":"Overflow Pipe",
"s23":"Cavity Brick or Block Wall",
"s24":"Wall Ties",
"s25":"Quoin Stone",
"s26":"Gutter and Rain Water Pipe",
"s27":"Felt with Stone Chippings on Decking",
"s28":"Fair Faced Brickwork",
"s29":"Damp Proof Course",
"s30":"Hardcore",
"s31":"Reveal",
"s32":"Timber, Concrete or Steel Lintel",
"s33":"Air Brick",
"s34":"Concrete Slab",
"s35":"Gulley with Granting",
"s36":"Soil and Vent Pipe",
"s37":"Manhole",
"s38":"Electricity Main",
"s39":"Solid Wall",
"s40":"Wall Plates on Sleeper Wall",
"s41":"Foul Drain",
"s42a":"Underpinning",
"s42b":"Underpinning",
"s43":"Interceptor Trap",
"s44":"Water Main"
}
detailsBox.innerHTML=myInfo[what]
}
</script>
<style>
body{width:980px;height:100%;margin:auto;margin-top:20px}
#imagebg{background:url(house.png);height:640px;width:715px;margin:auto}
.s1{width:20px;height:10px;margin-left:383px;margin-top:-615px}
.s2{width:20px;height:10px;margin-left:365px;margin-top:21px}
.s3{width:20px;height:10px;margin-left:430px;margin-top:-4px}
.s4{width:20px;height:10px;margin-left:380px;margin-top:12px}
.s5{width:20px;height:10px;margin-left:561px;margin-top:-5px}
.s6{width:20px;height:10px;margin-left:445px;margin-top:27px}
.s7{width:20px;height:10px;margin-left:320px;margin-top:-27px}
.s8{width:20px;height:10px;margin-left:380px;margin-top:30px}
.s9{width:20px;height:10px;margin-left:297px;margin-top:42px}
.s10{width:20px;height:10px;margin-left:355px;margin-top:-44px}
.s11{width:20px;height:10px;margin-left:339px;margin-top:31px}
.s12{width:20px;height:10px;margin-left:410px;margin-top:-37px}
.s13{width:20px;height:10px;margin-left:410px;margin-top:17px}
.s14{width:20px;height:10px;margin-left:452px;margin-top:15px}
.s15{width:20px;height:10px;margin-left:536px;margin-top:-74px}
.s16{width:20px;height:10px;margin-left:585px;margin-top:-29px}
.s17{width:20px;height:10px;margin-left:590px;margin-top:-35px}
.s18{width:20px;height:10px;margin-left:693px;margin-top:70px}
.s19{width:20px;height:10px;margin-left:636px;margin-top:41px}
.s20{width:20px;height:10px;margin-left:655px;margin-top:70px}
.s21{width:20px;height:10px;margin-left:475px;margin-top:-36px}
.s22{width:20px;height:10px;margin-left:448px;margin-top:22px}
.s23{width:20px;height:10px;margin-left:328px;margin-top:-105px}
.s24{width:20px;height:10px;margin-left:311px;margin-top:31px}
.s25{width:20px;height:10px;margin-left:278px;margin-top:-56px}
.s26{width:20px;height:10px;margin-left:267px;margin-top:26px}
.s27{width:20px;height:10px;margin-left:234px;margin-top:-23px}
.s28{width:20px;height:10px;margin-left:214px;margin-top:38px}
.s29{width:20px;height:10px;margin-left:204px;margin-top:43px}
.s30{width:20px;height:10px;margin-left:197px;margin-top:82px}
.s31{width:20px;height:10px;margin-left:300px;margin-top:-99px}
.s32{width:20px;height:10px;margin-left:328px;margin-top:-19px}
.s33{width:20px;height:10px;margin-left:327px;margin-top:60px}
.s34{width:20px;height:10px;margin-left:395px;margin-top:32px}
.s35{width:20px;height:10px;margin-left:423px;margin-top:33px}
.s36{width:20px;height:10px;margin-left:462px;margin-top:-90px}
.s37{width:20px;height:10px;margin-left:539px;margin-top:141px}
.s38{width:20px;height:10px;margin-left:585px;margin-top:-102px}
.s39{width:20px;height:10px;margin-left:589px;margin-top:-64px}
.s40{width:20px;height:10px;margin-left:610px;margin-top:22px}
.s41{width:20px;height:10px;margin-left:634px;margin-top:50px}
.s42a{width:20px;height:10px;margin-left:685px;margin-top:-2px}
.s42b{width:20px;height:10px;margin-left:742px;margin-top:-52px}
.s43{width:20px;height:10px;margin-left:780px;margin-top:-71px}
.s44{width:20px;height:10px;margin-left:723px;margin-top:-59px}
#detailsBox{font-size:25px;margin-top:230px;margin-left:155px;font-weight:bold}
</style>
</head>
<body>
<div id="imagebg"></div>
<div onMouseOver="details('s1')" class="s1"></div>
<div onMouseOver="details('s2')" class="s2"></div>
<div onMouseOver="details('s3')" class="s3"></div>
<div onMouseOver="details('s4')" class="s4"></div>
<div onMouseOver="details('s5')" class="s5"></div>
<div onMouseOver="details('s6')" class="s6"></div>
<div onMouseOver="details('s7')" class="s7"></div>
<div onMouseOver="details('s8')" class="s8"></div>
<div onMouseOver="details('s9')" class="s9"></div>
<div onMouseOver="details('s10')" class="s10"></div>
<div onMouseOver="details('s11')" class="s11"></div>
<div onMouseOver="details('s12')" class="s12"></div>
<div onMouseOver="details('s13')" class="s13"></div>
<div onMouseOver="details('s14')" class="s14"></div>
<div onMouseOver="details('s15')" class="s15"></div>
<div onMouseOver="details('s16')" class="s16"></div>
<div onMouseOver="details('s17')" class="s17"></div>
<div onMouseOver="details('s18')" class="s18"></div>
<div onMouseOver="details('s19')" class="s19"></div>
<div onMouseOver="details('s20')" class="s20"></div>
<div onMouseOver="details('s21')" class="s21"></div>
<div onMouseOver="details('s22')" class="s22"></div>
<div onMouseOver="details('s23')" class="s23"></div>
<div onMouseOver="details('s24')" class="s24"></div>
<div onMouseOver="details('s25')" class="s25"></div>
<div onMouseOver="details('s26')" class="s26"></div>
<div onMouseOver="details('s27')" class="s27"></div>
<div onMouseOver="details('s28')" class="s28"></div>
<div onMouseOver="details('s29')" class="s29"></div>
<div onMouseOver="details('s30')" class="s30"></div>
<div onMouseOver="details('s31')" class="s31"></div>
<div onMouseOver="details('s32')" class="s32"></div>
<div onMouseOver="details('s33')" class="s33"></div>
<div onMouseOver="details('s34')" class="s34"></div>
<div onMouseOver="details('s35')" class="s35"></div>
<div onMouseOver="details('s36')" class="s36"></div>
<div onMouseOver="details('s37')" class="s37"></div>
<div onMouseOver="details('s38')" class="s38"></div>
<div onMouseOver="details('s39')" class="s39"></div>
<div onMouseOver="details('s40')" class="s40"></div>
<div onMouseOver="details('s41')" class="s41"></div>
<div onMouseOver="details('s42a')" class="s42a"></div>
<div onMouseOver="details('s42b')" class="s42b"></div>
<div onMouseOver="details('s43')" class="s43"></div>
<div onMouseOver="details('s44')" class="s44"></div>
<div id="detailsBox">Hover Over the Numbers to Find the Answer</div>
</body>
</html>
任何帮助都会很棒：D
（您也可以查看http://cameronmlewis.com/house/）
答案 0 :(得分：0)
很抱歉，但是花了一些时间搞清楚IE7中出了什么问题，但我想我找到了你的问题。您一直在使用margin-left和margin-top来重新定位自动对齐的图像。对于大多数浏览器来说，这样可以正常工作，但IE浏览器包括IE7在内，这充其量只是错误的。因此，在这里，身体元素被绘制在一些悬停DIV的顶部。
如果你有IE8 +，你可以使用开发者工具看到这一点。您可以在页面完全加载后按F12执行此操作，将浏览器模式设置为IF7，然后使用“通过单击选择元素”工具（CTRL + B）尝试选择您创建的DIV。您会注意到，您只能选择body元素顶部的元素（这些元素也会在悬停时更改文本）。
最好的选择是使用'position：absolute;'和'z-index'如果你想重新定位像这样的DIV。另外，为了清理你的CSS，我建议你做以下事情：
<style>
.hoverDiv {
height: 10px;
position: absolute;
width: 20px;
z-index: 9999;
}
.s1 {
left: 300px;
top: 10px;
}
.s2 {
left: 350px;
top: 130px;
}
</style>
之后你可以像这样制作你的DIV：
<div class="hoverDiv s1"> </div>
这使用CSS继承来清理代码（减少重复次数），并且可以更轻松地进行小编辑。此外，我会看一下使用一些DIV参数来存储你的文本，而不是将它们放到JavaScript中 - 但这取决于你。