个人中心
gpt4 book ai didi

html - 仅当我在 Chrome 中选择检查元素时，我页面上的 css 菜单栏才有效

转载 作者：太空宇宙 更新时间：2023-11-03 23:55:34 25 4
gpt4 key购买 nike

css in chrome only works after inspect element 还有另外两个问题和 Weird issue with Chrome inspect element ，但既没有正确回答为什么 chrome 在检查元素时以不同方式呈现页面，也没有让我更接近于发现我的错误。

我不是真正的设计师，所以我在 http://www.mdifl.com 的页面上有一些错误的 CSS在 http://demo.tutorialzine.com/2011/05/css3-animated-navigation-menu/ 尝试教程后

我仔细看了好几遍，再也看不清菜单栏的问题了，chrome 的奇怪行为让我想起了暮光之城。任何帮助，将不胜感激。我的完整页面和源代码位于 http://www.mdifl.com。

具体问题是我的菜单栏上的链接不像链接，除非我在谷歌浏览器中处于检查元素模式。 html 是:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="DESCRIPTION" CONTENT="MultiDimensional Imaging provides diagnostic sonography and ultrsaound service for OB/GYN's throughout Miami-Dade and Broward counties. We serve doctors and their patients with profession, ARDMS sonographers and state of the art ultrasound equipment.">
    <title>Ob/Gyn Ultrasound Services</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="header">
        <h1>MultiDimensional Imaging<br>
        <span class="catchphrase">Give better ultrasound service, make thousands more.</span></h1>
    </div>

    <div class="content">
        <img class="floatingimage" src="img/volusoni.png">
            <ul class="menu">
            <li class="menuItem"><a href="#test">Test 1</a></li>
            <li class="menuItem"><a href="#test">Test 2</a></li>
            <li class="menuItem"><a href="#test">Test 3</a></li>
            <li class="menuItem"><a href="www.google.com">Test 4</a></li>
            </ul>
        <div class="photocontainer">
        </div>
    </div>

    <div class="footer">
    </div>
</body>

CSS 是:

 html{ height:100%;}

 body {background-color:#000;
height:90%;
width:95%;
display:block;
 }

 h1{
font-family:"Courier New", Courier, monospace;
font-size:40px;
top:50%;
 }

 .catchphrase{
font-style:italic;
font-family:"Times New Roman", Times, serif;
font-size:23px;
 }

 .floatingimage{
position:relative;
left:-250px;
top:-150px
}

 .menuContainer
 {
position:relative;
top:-400px;
left:100px;
 }

 .menu{
/* Affects the UL element */
overflow: hidden;
display: inline-block;

border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
 }

 .menu li{
/* Specifying a fallback color and we define CSS3 gradients for the major browsers:      */

background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

border-right: 1px solid rgba(9, 9, 9, 0.125);

/* Adding a 1px inset highlight for a more polished efect: */

box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

position:relative;

float: left;
list-style: none;
 }

 .menu li:after{

/* This creates a pseudo element inslide each LI */ 

content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;

/* Gradients! */
background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

/* This will create a smooth transition for the opacity property */
-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
 }

 /* Treating the first LI and li:after elements separately */

 .menu li:first-child{
border-radius: 4px 0 0 4px;
 }

 .menu li:first-child:after,
 .menu li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
border-radius:4px 0 0 4px;
 }

 .menu li:last-child{
border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */
.menu li:last-child:after,
.menu li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
border-radius:0 4px 4px 0;
}

 .menu li:hover:after,
 .menu li.selected:after,
 .menu li:target:after{
/* This property triggers the CSS3 transition */
opacity:1;
 }

 .menu:hover li.selected:after,
 .menu:hover li:target:after{
/* Hides the targeted li when we are hovering on the UL */
opacity:0;
 }

 .menu li.selected:hover:after,
 .menu li:target:hover:after{
opacity:1 !important;
 }

 /* Styling the anchor elements */

 .menu li a{
color: #5d5d5d;
display: inline-block;
font: 20px/1 Lobster,Arial,sans-serif;
padding: 12px 35px 14px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;
white-space:nowrap;
 }

 .menu a.homeIcon{
background:url('../img/home.png') no-repeat center center;
display: block;
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
text-indent: -9999px;
width: 16px;
 }

 .header{
background-image:url("img/metaltexture.jpg");
text-align:center;
margin-top:100px;
width:600px;
height:150px;
padding:7px;
padding-right:25px;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 20px; 
border-radius: 20px;
-moz-box-shadow:    4px 5px 5px 0px #999;
-webkit-box-shadow: 4px 5px 5px 0px #999;
box-shadow:         4px 5px 5px 0px #999;
 }

 .content{
width:800px;
height:800px;
position:relative;
top:-75px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
-moz-border-radius: 20px; 
border-radius: 20px;
z-index:-1;
 }

最佳答案

我真的很抱歉，我不知道为什么 chrome 会出现问题，但好消息是，您已将导航栏放在您使用内容类设计的 div 中。这不适用于您的导航栏。只需将您的导航栏从该 div 中取出，并为其提供一个独特的容器，它就可以正常工作。 

        <div class="nav">
            <ul class="menu">
            <li class="menuItem"><a href="#test">Test 1</a></li>
            <li class="menuItem"><a href="#test">Test 2</a></li>
            <li class="menuItem"><a href="#test">Test 3</a></li>
            <li class="menuItem"><a href="http://www.google.com">Test 4</a></li>
            </ul>
        </div>

这是你的作品 fiddle及其所有代码。

关于html - 仅当我在 Chrome 中选择检查元素时，我页面上的 css 菜单栏才有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18820534/

25 4 0
文章推荐： html - html 标签中的 CSS，文本不在框中
文章推荐： 运行系统命令和从控制台获取输出的混淆
文章推荐： c - UPC 中指向共享数组的私有(private)指针数组
文章推荐： html - 将样式表链接到 html - 我做错了什么？
太空宇宙
个人简介

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

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