当 Firefox 浏览器窗口未全屏打开时，为什么我的链接不起作用？答案

【问题标题】：Why my link is not working when firefox browser window is not opened in full screen?当 Firefox 浏览器窗口未全屏打开时，为什么我的链接不起作用？
【发布时间】：2011-08-16 19:51:28
【问题描述】：

在我的 html 页面中，页面顶部有两个链接：

<div id='my-link'>
    <a class="school" href="../school.html" target="_blank">School</a> 
    <a class="police" href="../police.html" target="_blank">Police</a> 
 </div>

（当鼠标点击链接时，链接页面应该在新的浏览器窗口中打开。）

CSS：

#my-link{
  margin-top: 5px;
  position: fixed;
  margin-left: 22%;
  width: 20%;
}

a.school{
  color: #6ffe11;
  font-size: small;
  text-decoration: none;

  position: relative;
  left: 30.5%;
  margin-top:10px;

}


a.police{
  color: #6ffe11;
  font-size: small;
  text-decoration: none;

  position: relative;
  left: 30.5%;

  margin-top:10px;
}

a.school:hover, a.police:hover
{
color: #2f8;
text-decoration: underline;
}

我在firefox 3.6.16上测试，当我用全屏打开firefox浏览器窗口时，链接正常工作（“学校”，“警察”页面成功打开， CSS 悬停功能也可以使用）。

但是，如果我打开浏览器窗口大小不是全屏，则链接根本不起作用，“学校”和“警察”页面未打开， CSS 悬停功能也不起作用。 链接文本就像页面上的纯文本。 *WHY???*

【问题讨论】：

我猜这与定位有关，但这只是猜测。
不，它们就像我提到的纯文本。当浏览器窗口未处于全屏模式时，根本不工作。（firefox 浏览器）
您是否安装了addons.mozilla.org/en-US/firefox/addon/fullerscreen 之类的扩展程序？这是否只影响这些链接而不影响页面上的其他任何内容？

标签： html css css-selectors

【解决方案1】：

我的猜测是页面上的其他内容位于其上方。但是，如果没有看到您的整个页面代码，则无法确定。

尝试将z-index 添加到您的#my-link div

-- 编辑--

抱歉，您已经使用过大量的 CSS 属性，我想您应该听说过 z-index。

替换

#my-link{
  margin-top: 5px;
  position: fixed;
  margin-left: 22%;
  width: 20%;
}

与

#my-link{
  margin-top: 5px;
  position: fixed;
  z-index: 100;
  margin-left: 22%;
  width: 20%;
}

z-indexhttps://developer.mozilla.org/en/Understanding_CSS_z-index 上的大量信息

-- 编辑--

为什么会起作用

如果 x 是水平的而 y 是垂直的，就像在图表上一样，z 是朝向或远离你。使用z-index 会给你带来一些东西。您也可以重叠这些属性。

以此为例。将其复制到记事本（或类似工具）中，保存并查看代码以了解。更改 style 部分中每个 div 的 z-index 属性以查看其工作原理。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Z-Index Example</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
          div { width: 100px; height: 50px; border: 1px solid #000; }
          #one { position: absolute; z-index: 10; top: 10px; left: 10px; background: #666; }
          #two { position: absolute; z-index: 30; top: 30px; left: 30px; background: #999; }
          #three { position: absolute; z-index: 20; top: 50px; left: 50px; background: #CCC; }
        </style>
      </head>

      <body>
        <div id="one">Furthest away</div>
        <div id="two">Nearest</div>
        <div id="three">In the middle</div>

      </body>

    </html>

自然地，在 HTML 中，代码中后面的元素会覆盖前面出现的内容。使用定位来移动事物会影响它们在页面自然流中的位置，并且可能会重叠。当我在你的 CSS 中看到你的 fixed 属性时，我就是这样猜测你的问题的，因为你把 div 排除在自然流之外。

【讨论】：

我不明白你。什么是 z-index，如何将其添加到 #my-link ？你能说得更具体点吗？
@斯科特，谢谢。现在可以了。您能否向我解释问题的原因以及为什么 z-index 有帮助？
@Mellon 我已经为您提供了一个详细但简单的示例。