移动CSS-未显示导航

问题描述

| 我一直在努力使我的网站与手机兼容。虽然我已成功设法链接了移动CSS和Web CSS，但导航元素将不会显示！ 如果有人对它为什么不显示有任何想法，我将不胜感激。 我的网站是www.therisingsuntarporley.co.uk，我在下面放置了移动CSS。 谢谢

html,body 
        {
            font-size: 30px sans-serif;
            background: #000;
            padding: 3px;
            color: #000;
            margin: 0;
        }

#body 
        {
            margin-right: 0;
            margin-left: 0;

        }

#middle {

    width: 90%;
    min-height: 500px;
    margin-top: 65px;
    border:3px solid #333;
    background-color:#FFFFF0;
    overflow:auto;
    padding-bottom: 75px; /* must be same height as the footer */
    }


#middlecontent 
        {
            font: normal 1.4em sans-serif;
            padding: 0px;
        }

#cencontent 
        {
            font: normal 1.4em sans-serif;
            padding: 0px;
            text-align: center;
        }


#mobilenav 

{  
  margin-top: 25%;   
  padding: 0;
  background: #000;
  list-style-type: none;
  font-size:2.4em;
  font-family:Verdana;
  height: auto;
  width: auto;
 }

#mobilenav a 
{   
  display: block;  
  color: #FFF;
  text-decoration: none;
  padding: 0 15px;
  line-height: 2.5;
  border-bottom: 1px solid #FFF;
}

#mobilenav a:hover 
{ 
  background: #C1C1C1;
  color:white;
}

#mobilenav #con a {
  border: none;
}

#logo
        {
            width:100%;
            height: auto;
        }
#footer 
{
    border-top: 3px solid #7CFC00;
    bottom: 0;
    width: 100%;
    background-color: #2e2e2e;
    clear:both;     
/*text colour*/
    font: normal 0.7em \"Trebuchet MS\",Arial,Helvetica,sans-serif;
    color: #fff;    
    text-transform: uppercase;
    text-align: center;
    font-stretch:expanded;
    background: #000;
}

#aboutus,#goomap,#myGallery,#mainimage,#navbar
        {
            display: none;
        }

    

解决方法

        好吧，您已经忘记向#mobilenav添加以下代码：

display: block !important;

如果在标准CSS之后加载移动CSS，也应该没有！important才能工作     ,        iPhone确实会使用media = screen加载所有CSS，就好像它是普通的浏览器一样。