Question

我刚刚开始了解如何在Internet Explorer和firefox中呈现css（和html）之间的差异。
Firefox显示............................... IE显示

firefox http://i46.tinypic.com/a5e0rl.png ie http://i50.tinypic.com/6dv8t0.png

我的HTML代码

<div id="navmenu">
    <ul id="menu">
   <li><a href="welcome.html" target="content">Home</a></li>
   <li><a href="http://www.google.com" target="content">Internet</a></a></li>
   <li>
     <div>
       <a href="">Forms</a></div>
       <ul class="hide">
         <li><a href="student_nurse/view_form.php" target="content">Student Nurse Request</a></li>
         <li><a href="supervisor_request/get_form.php" target="content">Supervisor IT Request</a></li>                      
       </ul>
   </li>
   <li>
     <div>
           <a href="">Help</a></div>
       <ul class="hide">
             <li><a href="/ticket" target="content">Support Admin</a></li>   
         <li><a href="/client" target="content">Submit/View Ticket</a></li>                 
       </ul> 
   </li>
   <li><a href="policies.html" target="content">Policies</a></li>  
 </ul>
   </div>

   <script type="text/javascript">
   $('#menu li:has(ul) > div').toggle(
        function() {
            $(this).next().css("margin-left","13px");
            $(this).next().show();
        },
        function() {
            $(this).next().hide();
        }
    );

    </script>

最后我的CSS为html

body{
    background-color: #008080;
    }

/* Logo Positioning */
 img{ 
    margin-bottom:20px;
    }

 #navmenu{
    border: 0px;
    border-bottom-width: 0;
    width: 185px; 
    }

 /* navigation menu style */
 #navmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    }

 /* base anchor effects */
 #navmenu li a{
    display: block;
    padding: 3px 0;
    padding-left: 9px;
    width: 169px; /*185px minus all left/right paddings and margins*/
    text-decoration: none;
    color: white;
    background-color: #008080;
    border-bottom: 1px solid #90bade;
    border-left: 7px solid #1958b7;
    }

 /* base anchor effects */
 * html #navmenu li a{ /*IE only */ 
    width: 169px; /*185px minus all left/right paddings and margins*/
    }

 /* hover effects for anchors */
 #navmenu li a:hover {
    background-color: #007070;
    border-left-color: #1c64d1; 
    }

 /* class to hide submenu's by default */
 .hide {
    display:none;
        }

 /* class for javascript clock */
 #clock { 
      margin-left:20px;
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 0.8em; 
      color: white; 
      background-color: #008080; 
      border: 2px solid #008080; 
      padding: 4px; 
      }

如果我的css或html中存在令人震惊的错误，请原谅我。我不是一个专业的网络程序员。我想在两个浏览器中以不同的方式呈现它们的一些指导。

Answer 1

在HTML中的这一行：

   <li><a href="http://www.google.com" target="content">Internet</a></a></li>

你已经关闭了锚两次。请尝试删除其中一个</a>代码。

Answer 2

检查你有

Internet</a></a>

Answer 3

Doctype的家伙会更好地帮助你。

跨浏览器css的精彩世界

3 个答案: