Question

我一直致力于让我的网站与手机兼容。虽然我已成功设法链接移动CSS和我的网络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;
        }

Answer 1

好吧，你忘了添加以下代码到#mobilenav：

display: block !important;

如果在标准css之后加载移动CSS

，也应该没有！important

Answer 2

iphone确实使用media = screen加载所有css，就好像它是普通的浏览器一样。

移动CSS - 导航没有出现

2 个答案: