Question

今天我偶然发现了一个非常奇怪的问题。我有一个响应式布局的网站，使用@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;
}
}

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}

}

工作demo

Answer 2

实际上，您的媒体查询没问题，问题在于您定位元素的方式。让我们看看：您在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

很抱歉，如果我太过愚蠢，但你说你是新来的。祝你好运。

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

2 个答案: