html - ページの CSS メニューバーは、Chrome で要素の検査を選択した場合にのみ機能します

Question

css in chrome only works after inspect elementとChrome inspect element の奇妙な問題には他に 2 つの質問がありますが、要素を検査するときに chrome がページを異なる方法でレンダリングする理由を正しく答えず、エラーの発見に近づけません。

私は実際にはデザイナーではないので、http://demo.tutorialzine.com/2011/05/css3-animated- でチュートリアルを試した後、http://www.mdifl.com のページに欠陥のある CSS があります。ナビゲーションメニュー/

何度か見直しましたが、メニューバーの問題を見つけるのに十分なほどまっすぐに見ることができず、奇妙なクロムの動作がトワイライトゾーンを思い出させました. どんな助けでも大歓迎です。私の全ページとソースコードは、http://www.mdifl.comで入手できます。

具体的な問題は、メニューバーのリンクが、Google Chrome で要素を検査するモードでない限り、リンクのように機能しないことです。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;
 }

score 2 · Accepted Answer

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>

これは、すべてのコードを使用した作業フィドルです。

score 1 · Accepted Answer

キャッシュをクリアして、ページをリロードしてみてください。他のブラウザでも試すことができます。他のブラウザで動作する場合、問題は Chrome にあり、コードにはありません。

score 0 · Accepted Answer

リンクには「http://」を含める必要があります。

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

あなたが持っているので、他のタブは機能しません

href = "#テスト"

サンプルリンクに変更します。ここに更新されたフィドルがあります

html - ページの CSS メニュー バーは、Chrome で要素の検査を選択した場合にのみ機能します

3 に答える 3

Related

Reference

html - ページの CSS メニューバーは、Chrome で要素の検査を選択した場合にのみ機能します