dav*_*vey 3 html css internet-explorer-6
我想尝试使用suckerfish样式下拉菜单在IE6中使用任何东西:悬停但不能让我的生活得到第3级显示!它让我疯狂对此有任何帮助将不胜感激.
继承人代码HTML:
<!DOCTYPE html>
<html>
<body>
<header>
<link rel="stylesheet" type="text/css" href="styleIE.css" />
</header>
<form>
<div id="container">
<div id = "menu">
<ul id="nav">
<li><a class="rhlinkstart" href="#"><span>Home</span></a></li>
<li><a class="rhlink" href="#"><span>Blad<br> Securities</span></a></li>
<li><a class="rhlink" href="#"><span>Market<br> Update</span></a></li>
<li><a class="rhlink" href="#"><span>Membership</span></a></li>
<li><a class="rhlink" href="#"><span>asdasd Info</span></a>
<ul>
<li><a class="linkchild" href="#"><img class = "arrow" src="Images/arrow.gif" alt="►">About the DOOB</a>
<ul>
<li><a class="linkchild" href="#">DOOB Explained</a></li>
<li><a class="linkchild" href="#">DOOB Jurisdications</a></li>
</ul>
</li>
<li><a class="linkchild" href="#">International Recogintion</a></li>
<li><a class="linkchild" href="#"><img class = "arrow" src="Images/arrow.gif" alt="►">Advantages of listing</a>
<ul>
<li><a class="linkchild" href="#">Advantages of Listing</a></li>
<li><a class="linkchild" href="#">Offers</a></li>
</ul>
</li>
<li><a class="linkchild" href="#">Advantages Of Membership</a></li>
<li><a class="linkchild" href="#">Publications</a></li>
<li><a class="linkchild" href ="#">Links</a></li>
</ul>
</li>
<li><a class="rhlinkend" href="#"><span>Contact Us</span></a></li>
<li> </li>
</ul>
</div>
</div>
</form>
</body>
</html>
CSS:
body{
line-height:1;
background: #e3e3e3;
behavior: url("csshover3.htc");
}
/*------------------------------------*\
Main
\*------------------------------------*/
div#container
{
width:1024px;
margin:0 auto;
position: relative;
text-align: center;
background-color: white;
border: 1px solid #8b8b8b;
}
.contentwrapper {
width: 964px;
margin: 0px auto;
text-align: left;
height: 100%;
}
.clearall {
clear: both;
}
/*------------------------------------*\
Home Page - Menu Styling
\*------------------------------------*/
#menu {
margin: 0 auto;
padding-left: 2%;
height: 47px;
position: relative;
top: 0;
border: 1px solid rgb(140,51,61);
font-size: 75%;
display: block;
}
#nav {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
height:47px;
background: none;
background-color: transparent;
width: 100%;
}
#nav ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
}
#nav a.rhlinkstart:link, #nav a.rhlinkstart:active, #nav a.rhlinkstart:visited {
position: relative;
float:left;
font-family: Georgia;
color: rgb(131,0,26);
width: 148px;
text-align: center;
height: 47px;
margin-right: -.07em;
margin-left: 0.5em;
line-height: 47px;
text-decoration: none;
}
#nav a.rhlink:link, #nav a.rhlink:active, #nav a.rhlink:visited {
position: relative;
float:left;
font-family: Georgia;
color: rgb(131,0,26);
width: 148px;
text-align: center;
height: 47px;
margin-left: -47px;
line-height: 47px;
text-decoration: none;
display: block;
}
#nav a.rhlinkend:link, #nav a.rhlinkend:active, #nav a.rhlinkend:visited {
float:left;
position: relative;
color: rgb(131,0,26);
width: 148px;
height: 47px;
line-height: 47px;
margin-left: -3.780em;
font-family: Georgia;
text-decoration: none;
}
#nav li {
float:left;
position:relative;
display: block;
}
li a.rhlink span {
line-height: 1em;
text-decoration: none;
text-align: center;
display: inline-block;
vertical-align: middle;
}
#nav li a.rhlink:hover,
#nav li a.rhlinkstart:hover,
#nav li a.rhlinkend:hover
{
background: red;
color: white;
text-decoration: none;
}
#nav a.linkchild:link,
#nav a.linkchild:active,
#nav a.linkchild:visited
{
display:block;
padding:0px 10px;
text-decoration:none;
color: white;
background: pink ;
}
#nav a.linkchild:hover {
background: rgb(118,0,18);
color: white;
}
#nav ul {
position:absolute;
top:47px;
left:0;
margin: 0;
width:200px;
display:none;
}
#nav li ul a {
width:15em;
float:left;
display: inline-block;
line-height: 2.5em;
text-align: left;
vertical-align: middle;
}
#nav li {
display: inline-block !important;
float: left;
}
#nav li a {
display: inline-block !important;
vertical-align: middle;
}
#nav ul ul {
top:auto;
}
#nav li ul ul {
left:200px;
margin:0;
}
#nav ul ul li ul {
left:200px;
margin:0;
}
#nav ul ul {
display:none;
}
#nav li:hover ul {
display:block;
}
/* 2 and 13 */
#nav ul ul,
#nav li:hover ul ul {
display:none;
}
/* 12 and 23*/
#nav li:hover ul, #nav li:hover li:hover ul {
display:block;
}
您似乎使用HTML5但不使用HTML5 shiv,这将允许旧浏览器识别HTML5标记.
http://code.google.com/p/html5shiv/
您还要在HTML5"标题"标记内加载样式表,而不是在您似乎没有的文档的常规"head"标记内.
修复这些问题可能有助于解决您的问题.
一种可能的方案:
display:inline-block在IE6中有一些严重的错误; 我建议display:inline改为尝试.
除此之外,您还需要做一些事情来触发IE将元素置于"hasLayout"模式.你不能直接这样做,因为它是一个内部IE标志,但是设置许多CSS属性中的任何一个都会触发它.最常用的一个是zoom:1因为它没有太多其他影响,并被其他浏览器忽略.
如果它工作,使用IE6 CSS hack来使它,以便其他浏览器可以继续使用inline-block.我建议使用下划线黑客或条件评论.
这是代码,使用下划线黑客:
display:inline-block;
_display:inline;
zoom:1;
希望有所帮助.
[注意:回答编辑包含hasLayout,扩展IE6 css hack选项,并提供一大块代码]