0

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

2 回答 2

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}

}

工作演示

于 2013-05-01T00:54:57.737 回答
0

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

对不起，如果我太说教了，但你说你是新手。祝你好运。

于 2013-04-30T23:24:57.550 回答