一個媒體查詢斷點禁用鏈接。其他人正在完美工作

今天我偶然發現了一個非常奇怪的問題。我有一個使用@media查詢並具有響應式佈局的網站，可能有斷點。其中一人（或決議的一個，作爲一個新手，我不太確定的術語），就禁止，因爲其他斷點一切完美以及之間的導航欄中的鏈接，我實在無法理解。一個媒體查詢斷點禁用鏈接。其他人正在完美工作

So here's the web - it occurs between 831px and 1025px

HTML和CSS是有效的。它出現在所有主流的瀏覽器中，除了工作的IE9之外，只是部分。我嘗試過谷歌搜索，試圖在這裏搜索，但我什至不知道我應該尋找什麼。

什麼是更奇怪的是，有這個類的特定查詢之間幾乎沒有差異。它在數值上大不相同。我也試圖改變他們 - 嗯，我嘗試了一切，我可能已經想到，但我必須承認這是我的第一個網站，我沒有任何經驗，所以也許我只是失去了一些東西根本。

哦，這裏的受災元素

@media screen and (min-width: 831px) and (max-width: 1025px){ 
.topMenuNav ul li a{ 
    display: table-cell; 
    padding: 0 0.9em; 
    vertical-align: middle; 
    height: 1.5em; 
    background-color: #8fbe00; 
    font-size: 1.2em; 
    color: #fbfbfb; 
    text-decoration: none; 
} 
} 

/* same element, different query, almost no difference - working */ 
@media screen and (min-width: 1026px){ 
.topMenuNav ul li a{ 
    display: table-cell; 
    padding: 0 0.9em; 
    vertical-align: middle; 
    height: 1.7em; 
    background-color: #8fbe00; 
    font-size: 1.4em; 
    color: #fbfbfb; 
    text-decoration: none; 
} 
}

來源

2013-04-30 zdns

這是不是真的，你想要的最佳答案，但它可以解決你目前的問題，

.topMenuNav ul li a{ position:relative; z-index:999} /* add this before end `tag` of @media screen and (min-width: 831px) and (max-width: 1025px){} */

就像如下：

@media screen and (min-width: 831px) and (max-width: 1025px){ 
.topMenuNav ul li a{ 
    display: table-cell; 
    padding: 0 0.9em; 
    vertical-align: middle; 
    height: 1.5em; 
    background-color: #8fbe00; 
    font-size: 1.2em; 
    color: #fbfbfb; 
    text-decoration: none; 
} 
.topMenuNav ul li a{ position:relative; z-index:999} 

}

工作demo

來源

2013-05-01 00:54:57 jhunlio

謝謝，似乎是完美的工作，這就是我需要的。 – zdns 2013-05-01 09:40:20

其實，您的媒體查詢是OK的代碼片段，問題是你的定位元素的方式。讓我們來看看：你在你的HTML/CSS定義的結構如下：

div.TopMenu 
    div.TopMenuNav 
    div.TopMenuSearch

你只需要添加float property。在這種情況下，把這個在CSS（外媒體查詢）：

.TopMenuNav{ 
    /* your styles plus : */ 
    float: left} 

    .TopMenuSearch{ 
    /* your styles plus : */ 
    float: right; /* or left if you want the search right after navigation */}

語義的原因，我建議你改變div.TopMenuNav和使用nav tag：

div.TopMenu 
    nav.TopMenuNav 
    div.TopMenuSearch

很抱歉，如果我太didatic，但你說你是新手。祝你好運。

來源

2013-04-30 23:24:57 rffaguiar

謝謝。那麼，現在我使用jhunlio的答案，因爲截止日期已經接近，我必須從佈局開始並開始創建內容。此外，我對代碼的更多部分並不滿意，所以我可能會更願意爲將來的項目留下您的建議。 – zdns 2013-05-01 09:38:20

一個媒體查詢斷點禁用鏈接。其他人正在完美工作

回答

相關問題