Fatal编程技术网
  • jsp/
  • Jsp css悬停在chrome中工作，但在IE中不工作

Jsp css悬停在chrome中工作，但在IE中不工作

jsp css

Jsp css悬停在chrome中工作，但在IE中不工作,jsp,css,Jsp,Css,当我在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 imp

当我在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>
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;
}
添加
作为HTML的第一行

删除

问题很可能与doctype有关，但这里有两个独立的问题，其中一个是相当微妙的bug

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

您当前使用的doctype是一个糟糕的doctype选择：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://">
这是HTML4.01过渡doctype。它非常非常古老。它可以追溯到IE6发布的日子，当时大多数人都使用IE5。它是导致浏览器进入“几乎标准模式”的少数doctype之一。这是一个介于旧的busted Quirks模式和现代标准模式之间的中间模式。使用这种模式是一个非常糟糕的主意，因为它的文档记录很差，而且不标准。使用此doctype将出现跨浏览器问题

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

<!DOCTYPE html>
这是最简单的一点，它将解决一些跨浏览器的错误。但是，它不会解决您问题中的具体问题。现在来看更微妙的bug，它实际上是给您带来问题的原因：

如果页面没有有效的doctype，IE（和其他浏览器）将使页面进入怪癖模式。你可能已经知道了

但是，您可能不知道的是，某些IE版本有一个bug，如果在doctype之前有任何内容，即使只是一个空行，也会导致浏览器将doctype视为无效

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

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

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

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

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

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

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

解决方法是删除该空行。这将使浏览器脱离怪癖模式，并解决悬停问题

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

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

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

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

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

<%@ include file="/vw_chksession.jsp" %>
我希望这能有所帮助。

你的ie版本是什么？