Question

当我在chrome css.hover中打开jsp页面时正常工作。但是在IE中它无效。以下是jsp文件

<%@page import="java.text.SimpleDateFormat"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://">

<%@ include file="/vw_chksession.jsp" %>
<%@page import="java.util.Date" %>
<html>
<head>
    <script type='text/javascript' src='<%=request.getContextPath()%>/Js/currentTime.js'></script>
<title><bean:message key="app.title" /></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<!-- For Menus CSS Import-->

<link href="<%=request.getContextPath()%>/Style/style.css" rel=stylesheet type="text/css"/>
<LINK media=all href="<%=request.getContextPath()%>/Style/New_Menu_Style/menus.css" type="text/css" rel="stylesheet"/>
<LINK media=all href="<%=request.getContextPath()%>/Style/New_Menu_Style/dropdown.css" type="text/css" rel="stylesheet"/>
<!--[if lte IE 6]><LINK media=all href="</%=request.getContextPath()%>/Style/New_Menu_Style/dropdown_ie.css" type=text/css rel=stylesheet><![endif]-->
<%
   long dt = System.currentTimeMillis();
    Date currentTime = new Date();
    SimpleDateFormat format = new SimpleDateFormat("dd");
    String today = format.format(currentTime);
%>

</head>

<body onload="startTime();" bottommargin="0" rightmargin="0" topmargin="0" leftmargin="0" bgcolor="WHITE">
<table width="100%" border="2" cellspacing="0" cellpadding="0">
  <tr>
      <td width="400" >&nbsp;&nbsp;<img height="50" src="<%=request.getContextPath()%>/index/Logo.bmp"></td>
<!--    <td width="300">&nbsp;</td>-->
    <td width="450" align="center" valign="middle">
        <font size="3" face="Tahoma" color="#043b72">
            <strong>MIRAE ASSET SALES MIS SYSTEM</strong>
        </font>
    </td>
    <td align="right" width="400" valign="top">
        <img src="<%=request.getContextPath()%>/index/news_question.gif" border=0 align="absmiddle"> <a href="../help.do" target="mainFrame"><b>Help</b></a> &nbsp;|&nbsp;
        <img src="<%=request.getContextPath()%>/index/bronze-star.gif" border=0 align="absmiddle"> <a href="http://mamfapp/Portal/Login.aspx" target="_BLANK" ><b>Portal</b></a>&nbsp;|&nbsp;
    <img src="<%=request.getContextPath()%>/index/icon_key.gif" border=0 align="middle"> <a href="<%=request.getContextPath()%>/Logout.do" TARGET="_top"><b>Logout</b>&nbsp;&nbsp;</a><br><br>
         <marquee style="height:20;width:200" scrollamount="200" scrolldelay="500">
                <b><div align="center" style= " color: #043b72; height: 4px; width: 180px;" id="txt"></div></b>
         </marquee>
    </td>

  </tr>
  <tr bgcolor="#FF6600" height="22px" >

  </tr>


  <tr bgcolor="#FF6600" height="22px" weight="4">
      <td colspan="2"  style="text-decoration: none; color: #043b72; font-size: 12px; font-weight: bold; text-align: left;">
          <img src="<%=request.getContextPath()%>/index/Profile.png" align="absmiddle"/>
          <%=STRuser%> &nbsp;&nbsp;<%=STRname%>&nbsp;&nbsp;<font style="font-weight: lighter;" >[ <%=STRtype%> ]</font>
      </td>
      <td colspan="2" style="text-decoration: none; font-size: 11px; font-weight: bold; text-align: right;">
          <a href="<%=request.getContextPath()%>/Home.do" target="mainFrame" style="color: #043b72;">
          Home
          </a>&nbsp;|
          <a href="changePass.do" target="mainFrame" style="color: #043b72;">
          Change Password
          </a>&nbsp;
      </td> </tr>

</table>
<div class="menu">
    <ul>
        <%
            String query="select DISTINCT a.ID,a.CAPTION,a.URL  from EMASTERS.MAST_MENU a,EMASTERS.DATA_MENU_ACCESS B where app_id='4' and a.menu_type='MAIN' "
            +" AND B.ACCESS_USERID='"+STRuserid+"' AND a.ID=B.MENU_ID "
            +"  ORDER BY TO_NUMBER(a.ID)";
            try{
            PreparedStatement ps=null;
            Connection conn=null;
            conn=GEN_Utility.getConnection(STRcon);
            ps=conn.prepareStatement(query);
            ResultSet rs_set=ps.executeQuery();
            System.out.println(" query "+query);
            while(rs_set.next()){
        %>
        <li>
            <a class="" href="#">&nbsp;<%=rs_set.getString(2)%></a>
            <ul>
                <% 
                query="select DISTINCT a.ID,a.CAPTION,a.URL,a.MENU_ORDER  from EMASTERS.MAST_MENU a,EMASTERS.DATA_MENU_ACCESS B where app_id='4' and a.menu_type='SUB' "
                +" AND B.ACCESS_USERID='"+STRuserid+"' AND a.ID=B.MENU_ID AND a.PARENT_ID='"+rs_set.getString(1)+"' "
                +" ORDER BY TO_NUMBER(a.MENU_ORDER)";
                ps=conn.prepareStatement(query);
                ResultSet rs_inner=ps.executeQuery();
                System.out.println(" query----- "+query);
                while(rs_inner.next()){
                System.out.println(" a.CAPTION "+rs_inner.getString(2));
                %>
                <li><a href="<%=request.getContextPath()+"/"%><%=rs_inner.getString(3)%>">&nbsp;<%=rs_inner.getString(2)%></a> 
                </li>
                <%    
                }
                %>
            </ul>
        </li>
        <%
        }///while query
        }catch(Exception E){
        out.println("Exception "+E);
        }
        %>
    </ul>
</div>

</body>
</html>

dropdown.css

.menu {
/*font-size: 11px; z-index: 100; width: 750px; font-family: arial, sans-serif; position: relative; height: 22px; background: #66bbee;*/
/*font-size: 11px; z-index: 100; width: 100%; font-family: arial, sans-serif; position: relative; height: 22px; background: #06285b;#043b72*/
    font-size: 11px;
    z-index: 100;
    width: 100%;
    font-family: arial, sans-serif;
    position: relative;
    height: 22px;
    background: #043b72;
}

.menu ul li a {
/*border-right: #fff 1px solid; border-top: #fff 1px solid; display: block; font-size: 11px; background: #710069; overflow: hidden; border-left: #fff 1px solid; width: 104px; color: #fff; line-height: 20px; border-bottom: #fff 1px solid; height: 20px; text-align: center; text-decoration: none*/
    border-right: #fff 1px solid;
    border-top: #fff 0 solid;
    display: block;
    font-size: 11px;
    background: #043b72;
    overflow: hidden;
    border-left: #fff 0 solid;
    width: 143px;
    color: #fff;
    line-height: 22px;
    border-bottom: #fff 0 solid;
    height: 21px;
    text-align: center;
    text-decoration: none;
}

.menu ul li a:visited {
/*border-right: #fff 1px solid; border-top: #fff 1px solid; display: block; font-size: 11px; background: #33ccff; overflow: hidden; border-left: #fff 1px solid; width: 104px; color: #fff; line-height: 20px; border-bottom: #fff 1px solid; height: 20px; text-align: center; text-decoration: none*/
    border-right: #fff 1px solid;
    border-top: #fff 0 solid;
    display: block;
    font-size: 11px;
    background: #043b72;
    overflow: hidden;
    border-left: #fff 0 solid;
    width: 143px;
    color: #fff;
    line-height: 22px;
    border-bottom: #fff 0 solid;
    height: 21px;
    text-align: center;
    text-decoration: none;
}

.menu ul {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    margin: 0;
    padding-top: 0;
    list-style-type: none;
}

.menu ul li {
    float: left;
    position: relative;
}

.menu ul li ul {
    display: none;
}

/* main menu mouse over */
.menu ul li:hover a {
/*background: #36f; color: #fff*/
/*background: #3399ff; color: #000; text-align: left; border-top: #fff 1px solid;*/
    background: #043b72;
    color: #f60;
    border-top: #fff 1px solid;
}

.menu ul li:hover ul {
    display: block;
    left: 0;
    width: 150px;
    position: absolute;
    top: 21px;
}

/* second level */
.menu ul li:hover ul li a.hide {
/*  background: #6a3; color: #fff*/
    background: #043b72;
    color: #fff;
    text-align: left;
}

.menu ul li:hover ul li:hover a.hide {
/*background: #6fc; color: #000*/
    background: #043b72;
    color: #f60;
}

.menu ul li:hover ul li ul {
    display: none;
}

/* third level */
.menu ul li:hover ul li a {
    display: block;
    background: #043b72;
    color: #fff;
    text-align: left;
}

/*====*/
.menu ul li:hover ul li a:hover {
/*background: #fff; color: #000*/
    background: #043b72;
    color: #f60;
}

.menu ul li:hover ul li:hover ul {
    display: block;
    left: 144px;
    position: absolute;
    top: 0;
}

.menu ul li:hover ul li:hover ul.left {
    left: -105px;
}

的style.css

body {
/* background-color:#FFCC66; */
 background-color:#FFFFFF;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color : Fieldsetblack;
}

TABLE {
    font-size: 12px;
    font-family: tahoma;
}
TD {
    font-size: 12px;
    font-family: tahoma;
    vertical-align: middle;
}
TR {
    font-size: 12px;
    font-family: tahoma;
    vertical-align: middle;
}
TH {
    font-size: 11px; font-family: tahoma;
    font-weight: bold;
    color:#FFFFFF;
    text-align: left;
}

radio
{
    font-family:arial;
    font-size:11px;
    font-weight: bold;
    color:#FF6600;
    text-align: left;
}

a:link
{
        /*color:#000000;*/
        color: #06285B;
        font-family:verdana;
        font-size:90%;
        text-decoration:none;
        font-weight: bold;
        /*display:block;*/
        margin:0px 0px 0px 0px;
        padding:0px;
        width:100%;
}

a:visited{
        /*color:#000000;*/
        color: #06285B;
        font-family:verdana;
        font-size:90%;
        text-decoration:none;
        font-weight: bold;
        /*display:block;*/
        margin:0px 0px 0px 0px;
        padding:0px;
/*      width:100%;*/
    }

a:hover{
        color: #FCAF10;
        /*color: #06585B;*/
        font-weight: bold;
        text-decoration:none;
}
a.tool{
        color: #FFFFFF;
        font-weight: bold;
        text-decoration:none;
}

a.tool:hover{
        color: #FFFFFF;
        font-weight: bold;
        text-decoration:none;
}
a.tool:visited{
        color: #FFFFFF;
        font-weight: bold;
        text-decoration:none;
}
.tool{
        color: #FFFFFF;
        font-weight: bold;
        text-decoration:none;
}

.lable
{
    font-family:"Trebuchet MS", Arial, Tahoma;
    font-size:12px;
    font-weight: bold;
    color:black;
    text-align: right;
    vertical-align:middle;
}
.lable3
{
    font-family:"Trebuchet MS", Arial, Tahoma;
    font-size:12px;
    font-weight: bold;
    color:black;
    text-align: left;
    vertical-align:middle;
}
.lable_dtl
{
    font-family:arial;
    font-size:12px;
    font-weight: bold;
    color:black;
    text-align: right;
    vertical-align:middle;
}

.lable1
{
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    color:black;
    text-align: center;
    vertical-align:top;
}

.lable2
{
    font-family:arial;
    font-size:11px;
    font-weight:bold;
    /*color:black;*/
    color:white;
    text-align:center;
    vertical-align:middle;  
    background: #06285B;

}

.btn {
    background: url(btnimg.bmp) repeat-x; color: #ffffff; font-weight: bold; line-height: 20px; cursor: hand
}

input,textarea,select,option{
    color:black;
    /*background:#FFFFCC;*/
    background:#EBF2FA;
    font-family:arial;
    font-weight: none;
    font-size:12px;
}

radio,checkbox{ 
background: #FFFFFF;
}


.textdata
{
    font-family:arial;
    font-size:12px;
    font-weight: none;
    /*color:#993300;*/
    color:black;
    /*color:black;*/

}

form
{
margin: 0px 0px 0px 0px;
 padding: 0px;
}

.toolbar
{
/*background: #06285B;*/
/*background: #FCAF10;*/
background: #FFFFFF;
/* font-size:15px; */
font-size:12px;
/*color: #FFFFFF;*/
color: #06285B;
font-weight: bold;
font-family:verdana;

}

.btnCreate {
    /*background: url(/MARS/Images/BackImage.jpg) repeat-x; */
    background: #043B72;
    color: #ffffff;
    font-weight: bold;
    line-height: 14px;
    cursor: hand;
}

.cancelButton{
    /*background: url(/MARS/Images/BackImage.jpg) repeat-x; */
    background: #043B72;
    font-weight: bold;
    line-height: 14px;
    cursor: hand;
    text-decoration:none;
}


#footer {

    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.xstooltip
{
    visibility: hidden; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    font: normal 8pt sans-serif;
    padding: 3px;
    border: solid 1px;

    background-color: #FFFFCC;
   /* background-image: url(images/blue.png);*/
}

fieldset{
    border: solid 2px;
    border-color: #043B72;
    /*border-color: #06285B;*/
}
table.repTable {
    border-width: 3px;
    border-spacing: 0px;
    border-style: solid;
    border-color: navy;
    border-collapse: collapse;  
}
table.repTable th {
    border-width: 2px;
    padding: 2px; 
    border-style: inset;
    border-color: navy;
    background-color: #143B72;
    text-align: center;
}
table.repTable td {
    border-width: 1px;
    padding: 2px;
    border-style: inset;
    border-color: gray; 
    text-align: left;
}

Answer 1

添加<!DOCTYPE html>作为HTML的第一行。

删除<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://">

Answer 2

问题很可能出在你的doctype上，但这里有两个独立的问题，其中一个是一个非常微妙的错误。

让我们首先处理一个简单的问题：

您目前使用的doctype是doctype的可怕选择：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://">

这是HTML4.01 Transitional doctype。它非常非常旧。它可以追溯到IE6推出的日子，大多数人都在使用IE5。它是导致浏览器进入“几乎标准模式”的少数文档类型之一。这是旧的Quirks模式和现代标准模式之间的中途模式。使用这种模式是一个非常糟糕的主意，因为它的文档记录很差，而且非标准。您将使用此doctype获得跨浏览器问题。

因此，我强烈建议您切换到更现代的HTML5 doctype：

<!DOCTYPE html>

这很简单，它将解决您的一些跨浏览器错误。但是，它不会解决您问题中的具体问题。所以现在对于更微妙的错误，这实际上是给你带来问题的：

如果页面没有有效的doctype，IE（以及其他浏览器）会将页面抛入怪异模式。你可能已经知道了。

但是，您可能不知道的是，某些IE版本有一个错误，如果在doctype之前有任何内容 - 即使只是一个空行 - 它将导致浏览器将doctype视为无效。< / p>

我看到你的代码是这样开始的：

<%@page import="java.text.SimpleDateFormat"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://">

<%@ include file="/vw_chksession.jsp" %>

请注意doctype之前的空白行。这很可能导致您的页面进入怪癖模式。

解决方案是删除该空白行。这应该使浏览器退出怪癖模式，并解决您的悬停问题。

因此，将这两点结合起来，您的代码现在应该如下所示：

<%@page import="java.text.SimpleDateFormat"%>
<!DOCTYPE html>

<%@ include file="/vw_chksession.jsp" %>

我希望有所帮助。

css-hover在chrome中工作但不在IE中工作

2 个答案: