固定標籤在移動點擊時縮進

我一直在努力的網站可以在這裏找到：Scroll Based Site 它作爲一個帶錨點的簡單頁面運行，它使用jQuery滾動到頁面上的正確位置當菜單項目被點擊。這適用於移動和桌面。在我試圖使移動友好的版本我做了以下CSS：固定標籤在移動點擊時縮進

@charset "utf-8"; 

#header { 
    width: 100%; 
} 

#home { 
    width: 100%; 
} 

#features { 
    width: 100%; 
} 

#colors { 
    width: 100%; 
} 

#contact { 
    width: 100%; 
} 

#footer { 
    width: 100%; 
} 

#nav li a { 
    margin-left: 30px; 
} 

@media only screen and (max-width: 720px){ 
    #nav li a:hover { 
     color: #a2a2a2; 
    } 

    #footer a:hover { 
     color: #a2a2a2; 
    } 

    #logo { 
     display: none; 
    } 

    * { 
     font-size: 12pt; 
    } 

    #header { 
     height: auto; 
     text-align: center; 
    } 

    #nav { 
     padding: 10px 5px; 
    } 

    #nav li a { 
     margin-left: 5px; 
    } 


    #footer { 
     padding: 13px 0; 
    } 

    #footer a { 
     font-size: 1em; 
    } 

    #colors img { 
     width: 100%; 
    } 
}

這似乎是工作，但由於某種原因，它開始當你點擊菜單鏈接到縮進你可以測試：Here at Responsivator

這種縮進並不是真的發生在手機上，而是通過觸摸手機上的相關事件從不發生在JavaScript中，所以它顯然仍然是一個問題。

有沒有人對我如何補救這個問題有任何想法？

來源

2013-04-25 imthatguyhere

嘗試在'#nav li a'和'#nav li a：hover'選擇器中添加相同的css指令，以防萬一。 – 2013-04-25 08:05:38

非常感謝。這讓我感覺像個白癡。我想我需要的只是一雙額外的眼睛。 – imthatguyhere 2013-04-25 08:11:11

我很高興幫助= D – 2013-04-25 08:13:16

這是一個有點怪，但隨着開發工具，我發現這個在main.css的上線50：

#nav li a, #nav li a:active, #nav li a:visited { 
color: #a2a2a2; 
text-transform: uppercase; 
font-weight: 700; 
text-decoration: none; 
margin-left: 50px; 
transition: color .5s ease; 
-moz-transition: color .5s ease; 
-webkit-transition: color .5s ease; 
-o-transition: color .5s ease; 
}

刪除#nav李一：積極的，它應該工作作爲aspected。

來源

2013-04-25 08:10:58 Wipster

這是我的錯誤。兩者都可以工作，但弗雷德裏克的評論並不是問題的主線。謝謝。 – imthatguyhere 2013-04-25 08:14:25

你需要#nav li a和#nav li a:hover有相同的css指令。

來源

2013-04-25 08:12:41

另一個答案確實是問題的根源，所以我接受了它，儘管如果我在main.css文件（首先提供的文件）中保留a：active，這同樣有效。 – imthatguyhere 2013-04-25 08:17:42

固定標籤在移動點擊時縮進

回答

相關問題