Почему моя ссылка не работает, когда окно браузера Firefox не открывается в полноэкранном режиме? - PullRequest
0 голосов
/ 16 августа 2011

На моей 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 также не работает. Тексты ссылок похожи на простые тексты на странице. * ПОЧЕМУ ??? *

1 Ответ

2 голосов
/ 16 августа 2011

Я предполагаю, что что-то еще на странице, расположенной над ней.Хотя нельзя быть уверенным, не увидев весь код вашей страницы.

Попробуйте добавить z-index к вашему #my-link div

- edit -

Извините,с хорошим набором свойств 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-index в https://developer.mozilla.org/en/Understanding_CSS_z-index

- редактировать -

Почему это работает

Если x горизонтальный, а y вертикальный, как на графике, z к вам или от вас.Использование z-index принесет что-то к вам.Вы также можете перекрывать эти свойства.

Возьмите это в качестве примера.Скопируйте его в Блокнот (или аналогичный), сохраните и посмотрите на код, чтобы понять.Измените свойства z-index каждого элемента div в разделе style, чтобы увидеть, как он работает.

<!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 элементы, находящиеся позже в коде, будут перекрывать вещи, которые появляются раньше.Использование позиционирования для перемещения вещей повлияет на то, где они находятся в естественном потоке страницы, и может перекрываться.Вот как я угадал вашу проблему, когда увидел ваше свойство fixed в вашем CSS, как вы вывели div из естественного потока.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...