2013-04-02 42 views
0

更新:我使用的是Yahoo的SiteBuilder软件,由于我怀疑问题可能与doctype标题有关,因此我在SiteBuilder上进行了Google搜索。有人在另一个论坛建议增加以下给提问者的网站CSS下拉菜单在IE9中不起作用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

我想补充说,到我的网页HTML的顶部。该下拉菜单在IE9中工作,但在IE和Firefox中,文本,登录框等都堵塞在屏幕的左上角。所以它似乎是Doctype中的一些东西,但还有其他的事情正在将所有的东西都转移到不合适的地方。基于这种发展的任何建议?

谢谢!

我将首先表明我是一个完全的新手,当涉及到这个东西。所以请原谅我,如果我提出基本问题或需要过于明确的指示。

基本上,我想添加一个下拉导航菜单到我的新网站。我在网上找到一个代码,并通过一些试验和错误了解如何使它成为我自己的代码。一切似乎都很好,直到我在IE9上测试它。当我将指针悬停在它上面时,下拉列表不会下拉。它在Firefox(我的主浏览器)中正​​常工作,一位朋友证实它可以在Chrome上运行。

有些Google搜索以后,我可以看到这是一个相当普遍的问题。我试图找到一个可行的解决方案,但是建议的修复程序不起作用,或者我真的不明白他们在说什么。正如我所说,我是一个努力理解这种新语言的新手。

这里是网站:http://gardenstatelegacy.com/GSL2_Test_Home.html

这是一项正在进行的工作。 “订阅”链接适用于Firefox和IE9。 “资源”标签应该有下拉菜单。目前在该下拉列表中工作的唯一链接是“顾问目录”。我在IE9中使用“兼容性视图”选项尝试了它,但它没有做任何事情。

我正在复制和粘贴下面使用的代码。如果有人可以看到为什么这与IE不兼容,请告诉我,我该如何解决它。再次,我是新手,所以请简单点。预先感谢您的任何帮助!

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css">  
     body { 
      padding: 0; 
      margin: 0; 
     } 

     #wrap { 
      width: 100%; 
      height: 50px; 
      margin: 0; 
      z-index: 99; 
      position: relative; 
      background-color: #660000; 
     } 

     .navbar { 
      height: 50px; 
      padding: 0; 
      margin: 0; 
      position: absolute; 
      border-right: 1px solid #660000; 
     } 

     .navbar li { 
      height: 50px; 
      width: 142px; 
      float: left; 
      text-align: center; 
      list-style: none; 
      font: normal bold 12px/1.2em Arial, Verdana, Helvetica; 
      padding: 0; 
      margin: 0; 
      background-color: #660000;     
     } 

     .navbar a {       
      padding: 18px 0; 
      border-left: 1px solid #C4BD97; 
      border-right: 1px solid #C4BD97; 
      text-decoration: none; 
      color: white; 
      display: block; 
     } 

     .navbar li:hover, a:hover { 
      background-color: #660000; 
     } 

     .navbar li ul { 
      display: none; 
      height: 50px;         
      margin: 0; 
      padding: 0;        
     } 

     .navbar li:hover ul { 
      display: block;         
     } 

     .navbar li ul li { 
      background-color: #660000; 
     } 

     .navbar li ul li a { 
      border-left: 1px solid #C4BD97; 
      border-right: 1px solid #C4BD97; 
      border-top: 1px solid #C4BD97; 
      border-bottom: 1px solid #C4BD97; 
     } 

     .navbar li ul li a:hover { 
      background-color: #660000; 
     } 
    </style>        
</head> 
<body> 
    <div id="wrap"> 
     <ul class="navbar"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Sample Issue</a></li> 
      <li><a href="http://gardenstatelegacy.com/Subscribe.html">Subscribe</a></li> 
      <li><a href="#">Resources</a> 
       <ul> 
        <li><a href="#">History Sites/Groups</a></li> 
        <li><a href="#">Speakers Bureau</a></li> 
        <li><a href="http://gardenstatelegacy.com/Professional_Directory.html">Consultant Directory</a></li> 
        <li><a href="#">Links</a></li> 
       </ul>   
      </li> 
      <li><a href="#">About GSL</a> 
       <ul> 
        <li><a href="#" >Mission Statement</a></li> 
        <li><a href="#">Who We Are</a></li> 
        <li><a href="#">News</a></li> 
       </ul>   
      </li> 
      <li><a href="#">GSL Store</a></li> 
      <li><a href="#">Advertise</a></li> 
     </ul> 
    </div> 
</body> 
</html> 

回答

0

我没有你的解决方案,但我确认它不IE10工作,但没有工作在Firefox 19(包括在PC上)。

你可能想要检查的一件事是文档类型,因为它被认为会导致跨浏览器问题,当涉及到CSS。尝试设置,看看是否有帮助。

抱歉,我不能更多的帮助。

+0

谢谢戴夫。我会怎么做?我认为你的意思是顶部的<!DOCTYPE html>行?你能建议更换吗?嘿,我警告过我是个新手! :) – Gordon

+0

其实你粘贴在你的问题的代码绝对不是在页面中显示的代码。 IE以怪癖模式呈现。 IE中的源文件根本没有显示文档类型。 – Jeff

+0

我应该添加下面的细节。我正在使用雅虎的SiteBuilder。下拉菜单是通过复制菜单的代码并将其粘贴到html框架中创建的。我的问题中的代码来自该HTML框架并定义菜单。菜单的代码出现在下方。文档类型在哪里?谢谢! – Gordon

0

我有一个类似的问题,我记得我搞砸了z-索引(增加值),并删除“浮动:左”。

+0

感谢您的建议。如果我理解正确,z-index会告诉你什么是元素。我不认为这是因为下拉部分在Firefox和Chrome中可见。我拿出“float:left”,它似乎只是把链接放在另一个上面,而不是沿着宽度。我认为戴夫可能已经有了一些东西。这似乎是一个兼容性问题。 – Gordon

+0

它是ie9中的一个怪癖,但是css编码全都是关于处理怪癖(不幸的是)。 IE在行为上有所不同(甚至在不同版本之间)。虽然,它似乎正在变得更好。 – ptutt

+0

正确。 z-index控制在什么元素前面显示的元素。 Z指数越高,该元素将被带到前面。我有一个类似的问题,但菜单列表不显示在表格上。您也可以玩弄删除“绝对”设置。抱歉是非特定的,但我现在无法访问我的代码。 – ptutt