一个媒体查询断点将禁用链接。 其他人工作得很好

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

抱歉，如果我太讲道了，但是您说您是新手。 祝好运。