Div исчезает, пока я не прокручиваю в Opera

Question

Div исчезает, пока я не прокручиваю в Opera

0

Я кодирую веб-страницу, и у меня проблема с исчезновением div в браузерах Opera и Maxthon (работает нормально с firefox).

Div - это простое меню с фиксированным положением, которое скользит вниз с помощью прокрутки окна, однако при нажатии ссылки в нем он будет прокручиваться вниз, но иногда он просто исчезает, пока я не прокручу его снова.

Я использую только HTML и CSS, у меня нет знаний в Javascript или что-то еще, но это довольно раздражает. Есть ли способ исправить это?

соответствующий код:

HTML:

<div id="menu">
    <ul>
        <li><a href="#about">About Us</a></li>
        <li><a href="#merch">Merchandise</a></li>
        <li><a href="#contact">Contact Us</a></li>
    </ul>
</div>

CSS:

#menu
    {
        position: fixed;
        margin-left: 5px;
        margin-top: 10px;
        width: 14%;
        height: 100px;
        border: 3px red solid;
        background: white;
        z-index: 100;
}

#menu ul
{
        position: absolute;
        float: left;
}

WolfyD 06 май 2014, в 14:00

Источник

Теги:

html

css

menu

1 ответ

Ещё вопросы

Gabriele Petrioli · Answer 1 · 2014-05-06T09-18-00.000Z

Попробуйте установить его положение left и top вместо margin.

#menu
    {
        position: fixed;
        left: 5px;
        top: 10px;
        width: 14%;
        height: 100px;
        border: 3px red solid;
        background: white;
        z-index: 100;
}

Обновить

Я немного искал, и, похоже, это известный Opera Bug.

Обходным путем является постоянное оживление какого-либо свойства, которое не возится с вашим макетом, но заставляет движок перерисовывать элемент. Таким образом, использование CSS-анимации и таргетинг на box-shadow с почти несуществующей тень устраняет проблему.

#menu
{
    position: fixed;
    margin-left: 5px;
    margin-top: 10px;
    width: 14%;
    height: 100px;
    border: 3px red solid;
    background-color: white;
    z-index: 100;
    -webkit-animation:noop 0.1s infinite; /*fix for maxthon*/
    animation: noop 0.1s infinite; /*fix for opera*/
}

@keyframes noop {/*fix for opera*/
  0%   { box-shadow:0 0 0 rgba(0,0,0,0.1); }
  100%   { box-shadow:0 0 1px rgba(0,0,0,0.1); }
}
@-webkit-keyframes noop{/*fix for maxthon*/
  0%   { box-shadow:0 0 0 rgba(0,0,0,0.1); }
  100%   { box-shadow:0 0 1px rgba(0,0,0,0.1); }
  }

(в моей опере есть задержка перед запуском анимации, поэтому, если вы сразу начнете щелкнуть, может возникнуть задержка, прежде чем исправлять проблему в первый раз..)

Другое решение - обновить Opera (так как теперь это v21)

К сожалению, это не сработало, оно все равно исчезает
Вы можете опубликовать живую ссылку? то, что вы описываете, не должно произойти, так что это может быть чем-то другим, мешающим этому ..
Конечно, извините за задержку, необходимо загрузить его wolfpawstudios.zzl.org/test
@WolfyD какая ОС и какие версии браузера? Он отлично работает в Windows 7 Opera v12.15 и последней версии Maxthon.
Хотя да, теперь, когда я думаю об этом, 64-битная версия оперы может быть немного глючной, я думаю,
Еще я заметил, что у вас неверный HTML. Запустите ваш код и исправьте его, так как это может быть причиной того, что вы получаете неожиданные результаты. См. Результаты проверки
Исправлены все ошибки, как в HTML, так и в CSS, к сожалению, это все еще происходит, но я уверен, что это просто ошибка Opera x64 или что-то в этом роде. Спасибо за помощь, хотя!
@WolfyD обновил ответ с исправлением этой ошибки.
Спасибо, я пытался, к сожалению, это все еще не работает. Дело в том, что iT не так, как будто его не существует, когда он исчезает, он просто не рисует, когда я выбираю его, он рисует правильно, если я перемещаю курсор над ним, он меняется на указатель, так что ... я не делаю ' не знаю, что происходит