Question

我这里有两个头脑风暴：＃1- IE8似乎不喜欢我的javascript; ＃2-所有IE6中的CSS对齐问题＆amp; 7S。非常感谢我在上一个问题上提出的各种建议（使用javascript） - 非常有帮助。

我已经能够获得仅CSS页面的双嵌套行为（当你点击下面的实时页面时看到team.html中的team.html看到非验证的html工作得很漂亮）用我的第一个javascript复制如下...

实况网页是＆gt; [here]＆lt; - 它适用于Firefox 6，Chrome和IE 6中的至少加载。 7根据一些browsershots.org测试，但在IE8中似乎不起作用。

这是我在标题中添加的javascript：

<script language="JavaScript">
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['hidden','hidden2','hidden3','hidden4','hidden5','hidden6','hidden7','hidden8','hidden9'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
 </script>

和相关的html：

<div id="greyback"><h2>Some header text</h2>
<ul id="scrollbox">
<div class="listcat">A sub-header in the list</div>
<li class="main">
<a href="javascript:showHide('hidden2');">Clickable List Item
</a>
</li>
<span id="hidden2">Detail about the list item - the javascript pops this span up when the List Item is clicked  
<span class="team"><img src="img.jpg"></span>  
as well as some more text in the same container, plus this link:  
<a href="link.pdf"><img src="img.png" >  
</a>
</span>
</ul>
</div><!-- closes greyback -->

与这些受javascript影响的元素相关的CSS：

.main {width:15em; background: lightblue;}
#hidden, #hidden2, #hidden3, #hidden4, #hidden5, #hidden6, #hidden7, #hidden8, #hidden9
{position: absolute;width: 46.5em; min-height: 20em; height: auto; left: 2em; top:16.5em;  z-index:10; font-size:0.8em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #ffffff; color: #535353; border: solid #FFA500 0.15em; display: none; font-family: Arial, sans-serif; float:left;
}
#scrollbox span.team img {float: right;  border: solid 0.1em #7ebb11; padding:2px; width:6em; margin: 0 auto; margin-bottom: 0.3em; margin-left: 0.5em; margin-top: 0em;}
#hidden2 a, #hidden3 a, #hidden4 a, #hidden5 a, #hidden6 a, #hidden7 a, #hidden8 a, #hidden9 a {float: left; width: auto; height:2em; margin: 0 auto; margin-right: 1em; margin-bottom: 0.5em;  padding-top:0.5em; color: green; font-style: bold; font-size: 100%;}
#hidden2 a img, #hidden3 a img, #hidden4 a img, #hidden5 a img, #hidden6 a img, #hidden7 a img,  #hidden8 a img, #hidden9 a img {width: 2em; margin:0 auto; float: left;  height:2em; margin-top: -0.5em;}
#hidden2 a img: hover, #hidden3 a img:hover, #hidden4 a img: hover, #hidden5 a img: hover, #hidden6 a img: hover, #hidden7 a img: hover, #hidden8 a img: hover, #hidden9 a img: hover {}

CSS只是做了div，ul，li等的非javascript样式：

#greyback {float: right; width: 21em;  height: auto;   
background-color: #e3e3e3; margin: 0 auto; margin-top: 1em;   
margin-right: 2em; padding-top: 1em; font-family:  Corbel, Calibri,   
sans-serif; border:0.25em solid #535353;}

#greyback h2 {font-size: 0.8em; margin: 0 auto; margin-left: 1em;   
margin-right: 1em;  margin-top: -0.5em; padding-top:1em;    
font-weight: bold; text-align: center; font-family: Corbel, "Century Gothic", Century-Gothic, "Avant Garde", "Avant Garde Gothic", Arial, sans-serif;color:#535353;}

#greyback img {margin-top:1em; border: 0.5em white solid; max-width:85%;   
height: auto;}

#scrollbox  {margin: 0 auto; margin-top: 1em;  margin-bottom: 1em;  width:18em;  list-style: none;  height:auto;  max-height: 21em; overflow:auto; border-bottom: 0.1em solid #FFA500; border-top: 0.1em solid #FFA500; }

.listcat {float: left; text-align:left; width: 100%; margin-left:-2em; margin-right: 0.5em; margin-top: 0.1em; margin-bottom: 0.3em; padding-top:0.5em; color: green; font-size: 90%; font-weight:bold;} 

#scrollbox a {float: left; color:#000000; text-decoration:none; width:18em; height: auto; margin: 0 auto; margin-bottom: 0.5em; font-family: Arial, sans-serif; font-size: 0.9em; text-align:left;}

#scrollbox a.menu {}
#scrollbox a span {display:none; position:absolute; left:0em; top:0;}
#scrollbox a span img {float: right; border:0; max-width:7.5em;}
#scrollbox a span img:hover {border:0; max-width:7.8em;}
#scrollbox a span img.team {border:solid 2px #7ebb11; padding:2px; max-width:8em; margin: 0 auto; margin-bottom: 0.3em; margin-left: 0.5em; margin-top: 0em;}
#scrollbox a:hover {border: 0; color: #7ebb11; font-size:0.9em;}
#scrollbox a:hover span {border: 0; color: #535353;}
#scrollbox a span:focus {color: blue;}
#scrollbox a:active  {border:none; color: #535353; /*this is the color of the hover pop-up text */ text-decoration: none;}
#scrollbox a:focus {border:0em solid #000; outline:0;}

#scrollbox ul {}
#scrollbox li {float:left; list-style: none; background: url(blank.png) no-repeat left center; margin-left: -1em; font-family:Arial, sans-serif; font-size: 0.9em;}
#scrollbox a:active span, #scrollbox li a:active span, #scrollbox a:focus span, #scrollbox li a:focus span   {display: block; width: 52.5em; min-height: 20em; height: auto; left: 1.5em; top:18em;  z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #ffffff; color: #535353; border: solid #FFA500 0.25em;}

我希望这很简单，但是（a）它似乎根本没有在IE8中加载和（b）IE6和7中的列表对齐正在切断列表文本。

非常感谢任何建议！干杯帕特里克

Answer 1

页面崩溃时出现错误“divScroller未定义”，好像你没有包含一些文件。

此外，您应该将任何修改dom的代码包装在某种“就绪块”中，以确保文档可以在以下位置进行操作：http://docs.jquery.com/Core/jQuery#callback

嵌套<a> and <span> challenge: part 2 - javascript, IE8 and alignment</span></a>

1 个答案: