一個媒體查詢斷點將禁用鏈接。 其他人工作得很好

Question

今天我偶然發現了一個非常奇怪的問題。 我有一個使用@media查詢的響應式布局網站，大概有斷點。 其中一個（或其中一個解決方案，我不太確定該術語是什么新手）禁用了導航欄中的鏈接，我真的不明白，因為在其他斷點之間，一切工作都很好。

這就是網絡-它出現在831px和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;
}
}

Answer 1

這並不是您想要的最佳答案，但可以解決當前的問題，

.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}

}

工作演示

Answer 2

實際上，您的媒體查詢還可以，問題在於您放置元素的方式。 讓我們看看：您在HTML / CSS中定義了以下結構：

div.TopMenu
    div.TopMenuNav
    div.TopMenuSearch

您只需要添加float屬性 。 在這種情況下，請將其放入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標簽 ：

div.TopMenu
    nav.TopMenuNav
    div.TopMenuSearch

抱歉，如果我太講道了，但是您說您是新手。 祝好運。