个人中心
gpt4 book ai didi

asp.net - 李 :hover ul works in Chrome always and IE9 "sometimes"

转载 作者：太空宇宙 更新时间：2023-11-04 14:13:12 24 4
gpt4 key购买 nike

我正在尝试经典的 CSS 悬停下拉菜单。我想说 CSS 工作得很好，因为它在 Chrome 中看起来是我想要的方式。但是，当我将它作为独立页面使用时，它在 IE9 中可以正常工作，但当我在 Site.Master 上使用它时却不能。

下面是我在 IE9 中工作的 HTML 标记:

<%@ Page Title="Part Info" Language="vb" AutoEventWireup="false"
CodeBehind="Part_Info.aspx.vb" Inherits="MOO.Part_Info" %>

<!DOCTYPE HTML>
<html>
<head id="Head1" runat="server">
    <title>    </title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="Form1" runat="server">
    <div class="page">

<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
    <li class="topmenu">    <a href="#" title="Admin" style="height:24px;line-height:24px;">    <span>Admin    </span>    </a>
            <ul>
            <li>    <a href="AdminDashBoard.aspx" title="Dashboard">Dashboard    </a>    </li>
            <li>    <a href="Feedback.aspx" title="Feedback">    <span>Feedback    </span>    </a>    </li>
            <li>    <a href="MOO_Updates.aspx" title="MOO Report Updates">MOO Report Updates    </a>    </li>
        </ul>
    </li>
    <li class="topmenu">    <a href="#" title="Orders" style="height:24px;line-height:24px;">    <span>Orders    </span>    </a>
        <ul>
            <li>    <a href="Default.aspx" title="Allocation">Allocation    </a>    </li>
            <li>    <a href="CurrentMonthHolds.aspx" title="Holds">    <span>Holds    </span>    </a>    </li>
            <li>    <a href="SpecialProjA.aspx" title="Project Status">Project Status    </a>    </li>
            <li>    <a href="ShipPastDue.aspx" title="Past Due">    <span>Past Due    </span>    </a>    </li>
            <li>    <a href="Backorder_Impact.aspx" title="Backorders">    <span>Backorders    </span>    </a>    </li>
            <li class="sublast">    <a href="/Shortages.aspx" title="Shortages">Shortages    </a>    </li>
        </ul>
    </li>
</ul>
<!-- End css3menu.com BODY section -->

    <asp:Label ID="Alert_Label" runat="server">    </asp:Label>
    </div>
    </form>
</body>
</html>

然后，当我尝试在 Site.Master 中使用相同的菜单 HTML 和 CSS 时，我没有得到任何悬停操作。我的网站.Master HTML:

    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="MOO.Site" %>

<!DOCTYPE HTML>
<html>
<head runat="server">
    <title>    </title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    <script type="text/javascript">
    </script>
</head>
<body>
    <form id="Site_Master_Form" runat="server">
    <div class="page">

       <div class="header">
            <div class="title">
                <h1>
                Manufacturing/Operations Online (MOO)
                </h1>
            </div>
            <div class="loginDisplay" >
                <%= "Welcome, " & Replace(System.Web.HttpContext.Current.Request.ServerVariables("LOGON_USER"), "BOUMATIC\", "")%>
            </div>
            <div class="clear hideSkiplink">
                 <img id="img_CowView" class="CowView" src="Styles/img/CowView.png" usemap="#CowViewMap" alt="" style="border: none;"/>
                     <map id="id_CowViewMap" name="CowViewMap">
                          <area shape="circle" coords="120,30,20" alt="" href="#" ondblclick='open_udderground("Udderground/default.aspx")'/>
                     </map>
                 <input id="btn_Part_Info" type="button" value="Part Info" onclick='open_win("Part_Info.aspx")' runat="server" style="float:right;"/>
                 <input id="btn_Archive_Notes" type="button" value="Archive Notes" onclick='open_win("ArchiveNotes.aspx")' runat="server" style="float:right;"/>
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<li class="topmenu">    <a href="#" title="Admin" style="height:24px;line-height:24px;">    <span>Admin    </span>    </a>
        <ul>
        <li>    <a href="AdminDashBoard.aspx" title="Dashboard">Dashboard    </a>    </li>
        <li>    <a href="Feedback.aspx" title="Feedback">    <span>Feedback    </span>    </a>    </li>
        <li>    <a href="MOO_Updates.aspx" title="MOO Report Updates">MOO Report Updates    </a>    </li>
    </ul>
</li>
<li class="topmenu">    <a href="#" title="Orders" style="height:24px;line-height:24px;">    <span>Orders    </span>    </a>
    <ul>
        <li>    <a href="Default.aspx" title="Allocation">Allocation    </a>    </li>
        <li>    <a href="CurrentMonthHolds.aspx" title="Holds">    <span>Holds    </span>    </a>    </li>
        <li>    <a href="SpecialProjA.aspx" title="Project Status">Project Status    </a>    </li>
        <li>    <a href="ShipPastDue.aspx" title="Past Due">    <span>Past Due    </span>    </a>    </li>
        <li>    <a href="Backorder_Impact.aspx" title="Backorders">    <span>Backorders    </span>    </a>    </li>
        <li class="sublast">    <a href="/Shortages.aspx" title="Shortages">Shortages    </a>    </li>
    </ul>
</li>
</ul>
<!-- End css3menu.com BODY section -->

            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

    </div>
    </form>
</body>
</html>

同样，我使用相同的 CSS、相同的 web.config 和相同的菜单 HTML。为什么，哦，为什么，我可以让 IE9 在一个页面上识别 li:hover ul 而在另一个页面上不识别吗？？？

谢谢，
罗布

添加适用的 CSS:

/*  CSS Menu Items  
----------------------------------------------------------*/
ul#css3menu1, ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#0071B9;
}
li ul
{
/*visibility: hidden;*/
display: none;
position: absolute;
left: 0;
top: 100%;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background-color: #0071B9;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
padding: 0;
color: #FFFFFF;
}
li:hover ul
{
/*visibility: visible;*/
display: block;
opacity:1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;
/*font-size:0;*/
float:left;}

ul#css3menu1 li:hover{
z-index:1;}

ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;-moz-box-shadow:#585858 0px 0px 1px;-webkit-box-shadow:#585858 0px 0px 1px;box-shadow:#585858 0px 0px 1px;}

ul#css3menu1{
/*font-size:0;*/
z-index:999;
position:relative;
display:inline-block;
zoom:1;padding:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;
/**display:inline;*/}
* html ul#css3menu1 li a{
display:inline-block;}

ul#css3menu1>li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}

ul#css3menu1 a{ 
display:block;vertical-align:middle;text-align:left;text-decoration:none;
font:bold 18px Verdana; color:#FFFFFF; cursor:pointer;padding:23px 18px 26px;
background-color:#0071B9;
background-repeat:repeat;border-width:0px;border-style:none;border-color:; }


ul#css3menu1 ul li{
float:none;margin:0;}

ul#css3menu1 ul a
{
text-align: left;
padding: 8px 15px;
background-color: #0071B9;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #4A4A4A;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
font: bold 14px  Verdana;
color: #FFFFFF;
text-decoration: none;
}

ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
border-style:none;color:#FFFFFF;text-decoration:none;}
ul#css3menu1 img{
border:none;vertical-align:middle;margin-right:23px;}
ul#css3menu1 ul span{
background-image:none;padding-right:8px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#F29233;border-style:solid;border-color:#4A4A4A;color:#FFFFFF;text-decoration:none;}
ul#css3menu1 li.topmenu>a{
background-color:#0071B9;border-width:3px 0 0 0;border-style:solid;border-color:transparent transparent transparent transparent;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
background-color:#F29233;border-style:solid;border-color:#0071B9 transparent transparent transparent;}
ul#css3menu1 li.sublast>a{
border-width:0px;}
/* CSS fallback */
ul#css3menu1 li:hover > ul.child  {
display: block;
}
ul#css3menu1 li:hover > ul.grandchild  { 
display: block;
}

最佳答案

我找到了!!!

我已经注释掉了以下行:

<!-- Commenting out old !DOCTYPE and <html> tags so that I can use HTML5 as needed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-->

并将其排除在我的帖子之外，因为我认为它不相关。但是，当我完全删除该行(而不是仅仅将其注释掉)时，所有页面都工作正常。

经验教训:看来您不能足够仔细地注释掉某些行。

关于asp.net - 李 :hover ul works in Chrome always and IE9 "sometimes"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20570855/

24 4 0
文章推荐： css - 文件编码 - 这是什么类型的编码？
文章推荐： html - 为什么显示: flex push the following element onto a new line?
文章推荐： javascript - Div 背景图片最大尺寸
文章推荐： html - 无限滚动使图像重复Y
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com