1. 首頁
  2. 問答
  3. css-hover在chrome中工作，但在IE中不工作

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

2013-10-28 197 views
1

當我打開鉻css.hover中的jsp頁面正常工作，但在IE中它不工作。 以下是JSP文件css-hover在chrome中工作，但在IE中不工作

<%@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; 
}

來源

2013-10-28 Sumit

+0

什麼是你的ie版本？ – waitingkuo

+0

IE8 I AM USING .. – Sumit

回答

1

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

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

來源

2013-10-28 14:21:33 waitingkuo

1

的問題是很可能是與你的文檔類型，但是這裏也有在工作中兩個不同的問題，其中之一是相當微妙的錯誤。

讓我們處理了一個方便第一：

您目前使用的DOCTYPE DOCTYPE是一個可怕的選擇：

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

這是HTML4.01過渡的doctype。這是非常很舊。它的歷史可以追溯到IE6發佈時，大多數人都在使用IE5。它是導致瀏覽器進入「幾乎標準模式」的少數文檔類型之一。這是舊的Quirks模式和現代標準模式之間的中途模式。使用這種模式是一個非常糟糕的主意，因爲它沒有很好的文檔和非標準。您將使用此文檔類型獲得跨瀏覽器問題。

因此，我強烈建議切換到更現代的HTML5文檔類型：

<!DOCTYPE html>

這是容易的一點，它會解決你的一些跨瀏覽器的bug。但它不會解決您的問題中的具體問題。因此，現在爲更微妙的錯誤，這實際上是給你的問題：

如果頁面沒有有效的文檔類型，IE（和其他瀏覽器）會將頁面引入怪癖模式。你可能已經知道這一點。

但是，您可能不知道的是，某些IE版本有一個錯誤，如果在doctype之前有任何內容 - 即使只是一個空行 - 它將導致瀏覽器將doctype視爲無效。

我看你的代碼是這樣開始的：

<%@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" %>

我希望幫助。

來源

2013-10-28 14:48:11 Spudley

相關問題

 相關問題