Question

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

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

我已经好好看过几遍了，看不到菜单栏上的问题就看不出来了，奇怪的镀铬行为让我想起了暮光之城。任何帮助，将不胜感激。我的完整页面和源代码位于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;
 }

Answer 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及其所有代码。

Answer 2

尝试清除缓存并重新加载页面。您也可以在其他浏览器上试用它。如果它适用于其他浏览器，则问题出在Chrome上，而不是代码。

Answer 3

您必须在链接中加入“http：//”。

             <li class="menuItem"><a href="http://www.google.com">Test 4</a></li>

其他标签不起作用，因为您有

 href = "#test"

将其更改为某个示例链接。这是更新后的FIDDLE

只有在Chrome中选择inspect元素时，我页面上的css菜单栏才有效

3 个答案: