我可以在所有瀏覽器中使用我的屏幕菜單嗎？

我目前正在爲學校建設一個網站，事情進展順利。但是，我試圖在不同的瀏覽器上打開該網站並遇到問題。在某些瀏覽器中，我在html/css中創建的屏幕菜單似乎並不想正常工作。有時它會出現在屏幕上，永遠不會關閉，有時我做的按鈕會消失，你根本無法訪問菜單。有沒有辦法讓它在所有瀏覽器上都能正常工作。我相信錯誤發生在Chrome瀏覽器和Internet Explorer以及Firefox。然而，它在所有三種瀏覽器中均可在我的電腦上正常工作。我可以在所有瀏覽器中使用我的屏幕菜單嗎？

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>Code Resources</title> 
<link rel="stylesheet" type="text/css" href="cisco.css" media="screen"> 
<link rel="stylesheet" type="text/css" href="template.css" media="screen"> 
</head> 
<body> 
<div class="navigation"> 
    <figure> 
    <img src="menubanner.jpg" alt="menu banner" /> 
    </figure> 
<ul> 
    <li class="nav-item"><a href="index.html">Home</a></li> 
    <li class="nav-item"><a href="about.html">About</a></li> 
    <li class="nav-item"><a href="htmlcss.html">HTML & CSS</a></li> 
    <li class="nav-item"><a href="ciscohome.html">Cisco</a></li> 
</ul> 
</div> 
<input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
<label for="nav-trigger"></label> 
<div class="site-wrap"> 
    <h1>Cisco Router and Switch Commands</h1> 
    <h2></h2> 
    <br> 
    <br> 
    <br> 
    <br> 
</div> 
</body> 
</html>

的CSS是：

.navigation { 
    /* critical sizing and position styles */ 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 0; 

    /* non-critical appearance styles menu color */ 
    list-style: none; 
    background: #333; 
} 

figure { 
    width: 200px; 
    text-align: center; 
    margin: 20px 0; 

} 
figure img { 
    width: 100px; 
} 
/* Navigation Menu - List items */ 
.nav-item { 
    /* non-critical appearance styles */ 
    width: 200px; 
    border-top: 1px solid #111; 
    border-bottom: 1px solid #000; 
} 
.nav-item a { 
    /* non-critical appearance styles */ 
    display: block; 
    padding: 1em; 
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); 
    color: white; 
    font-size: 1.2em; 
    text-decoration: none; 
    transition: color 0.2s, background 0.5s; 
} 
.nav-item a:hover { 

    background: white; 
    color: rgb(123,193,149); 
} 
/* Site Wrapper - Everything that isn't navigation */ 
.site-wrap { 
    /* Critical position and size styles */ 
    min-height: 100%; 
    min-width: 100%; 
    background-color: white; /* Needs a background or else the nav will show through */ 
    position: relative; 
    top: 0; 
    bottom: 100%; 
    left: 0; 
    z-index: 1; 

    /* non-critical apperance styles */ 
    padding: 4em; 
    background-image: url(b1.gif); 
    background-size: contain; 
} 
/* Nav Trigger */ 
.nav-trigger { 
    /* critical styles - hide the checkbox input */ 
    display: block; 
    height: 0; 
    width: 0; 
} 

label[for="nav-trigger"] { 
    /* critical positioning styles */ 
    position: fixed; 
    left: 15px; top: 15px; 
    z-index: 2; 
    /* Menu Button*/ 
    /* non-critical apperance styles */ 
    height: 75px; 
    width: 125px; 
    cursor: pointer; 
    background-image: url("menubutton.jpg"); 
    background-size: contain; 
} 

/* Make the Magic Happen */ 
.nav-trigger + label, .site-wrap { 
    transition: left 0.2s; 
} 

.nav-trigger:checked + label { 
    left: 215px; 
} 

.nav-trigger:checked ~ .site-wrap { 
    left: 200px; 
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5); 
} 

body { 
    /* Without this, the body has excess horizontal scroll when the menu is open */ 
    overflow-x: hidden; 
} 

/* Additional non-critical styles */ 

h1, h2, h3, h4, h5, h6, p { 
    max-width: 600px; 
    margin: 0 auto 1em; 
} 

code { 
    padding: 2px; 
    background: #ddd; 
} 

/* Micro reset */ 
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;} 
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; } 

@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
    .nav-trigger,label {display:none;} 
    .nav-item,figure {width:20%} 
    .site-wrap {min-width:80%;float:right;} 
    figure img { 
    width: 150px; 
} 
}

來源

2014-09-26 Nathan R. Watkins

請的jsfiddle它 – Bioto 2014-09-26 17:27:16

你嘗試使用http：// modernizr.com/ ?? 你有什麼瀏覽器遇到問題？ – 2014-09-26 17:37:13

我遇到了Mozilla Firefox，Chrome和Internet Explorer的問題。它並不總是工作，它並不總是失敗，沒有我從來沒有使用過JSfiddle或modernizr.com。 – 2014-09-29 13:41:21

在本節所需要的最小寬度改爲1600像素

@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
    .nav-trigger,label {display:none;} 
    .nav-item,figure {width:20%} 
    .site-wrap {min-width:80%;float:right;} 
    figure img { 
    width: 150px; 
} 
}

來源

2014-10-01 14:26:11

我可以在所有瀏覽器中使用我的屏幕菜單嗎？

回答

相關問題