style.display не работает в Firefox, Opera, Safari – IE7 ОК

StackOverflow https://stackoverflow.com/questions/10366

  •  08-06-2019
  •  | 
  •  

Вопрос

У меня есть абсолютно позиционированный div которое я хочу показать, когда пользователь нажимает ссылку.А onclick ссылки вызывает функцию js, которая устанавливает блокировку отображения div (также пробовал:"", inline, table-cell, inline-table, и т. д).Это прекрасно работает в IE7, а не во всех других браузерах, которые я пробовал (FF2, FF3, Opera 9.5, Safari).

Я пробовал добавлять оповещения до и после звонка, и они показывают, что отображение изменилось с none к block но div не отображается.

я могу получить div для отображения в FF3, если я изменю отображаемое значение с помощью инспектора HTML Firebug (но не путем запуска javascript через консоль Firebug) - поэтому я знаю, что оно не просто отображается за пределами экрана и т. д.

Я перепробовал все, что мог придумать, в том числе:

  • Использование другого типа документа (XHTML 1, HTML 4 и т. д.)
  • Использование видимости видимой/скрытой вместо отображения блока/нет
  • Использование встроенного JavaScript вместо вызова функции
  • Тестирование на разных машинах

Есть идеи о том, что может вызвать это?

Это было полезно?

Решение 2

Поскольку установка свойств с помощью javascript никогда не работала, а установка с помощью проверки Firebug работала, я начал подозревать, что селектор идентификатора javascript не работает - может быть, в DOM было несколько элементов с одним и тем же идентификатором?Источник не показал, что они были, но, просматривая все элементы div с помощью javascript, я обнаружил, что это так.Вот функция, которую я использовал для отображения всплывающего окна:

function openPopup(popupID)
{
  var divs = getObjectsByTagAndClass('div','popupDiv');
  if (divs != undefined && divs != null)
  {
    for (var i = 0; i < divs.length; i++)
    {
      if (divs[i].id == popupID)
        divs[i].style.display = 'block';        
    }
  }
}

(служебная функция getObjectsByTagAndClass не указана)

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

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

Всем ответившим спасибо за помощь!

Другие советы

Можете ли вы предоставить некоторую разметку, воспроизводящую ошибку?Ваша ситуация, должно быть, как-то связана с вашим кодом, поскольку я могу заставить его работать в IE, FF3 и Opera 9.5:

function show() {
  var d = document.getElementById('testdiv');
  d.style.display = 'block';
}
#testdiv {
  position: absolute;
  height: 20px;
  width: 20px; 
  display: none;
  background-color: red;
}
<div id="testdiv"></div>
<a href="javascript:show();">Click me</a>

Нашёл ответ:Мне нужно использовать следующее, чтобы оно работало в обоих браузерах:

document.getElementById('editRow').style.display = '';

На самом деле у меня возникла та же проблема, которую вы здесь описываете.Что на самом деле решило мою проблему, так это изменение свойств документа.

Старая спецификация DOCTYPE/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Заменено на

<html>

Проверьте консоль ошибок (Меню «Инструменты» > «Консоль ошибок» в Firefox 3), чтобы убедиться, что не происходит другой ошибки, которую вы не видите, которая мешает работе вашего скрипта.

Попробуйте установить высоту и ширину элемента div и убедитесь, что он находится сверху, установив его z-индекс выше, чем все остальное.Если абсолютно позиционированный элемент div находится внутри относительно позиционированного элемента, его верхнее и левое расположение основано на верхней и левой частях относительно позиционированного элемента.Попробуйте разместить свой div прямо под элементом body.

Вы должны написать window.onload метод:

window.onload = document.getElementById('testdiv').style.display='inline';

Или вы также можете создать переменную:

var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';

В Firefox 3.5 возникает досадная ошибка отображения, но ее нет в IE7 или Firefox 2.0.9.

У меня есть 3 абсолютных позиции DIV - первая с обычным текстом;второй с CSS-меню (тип солнышка с UL и LI) и третий то же самое.Третий вообще не будет отображаться, даже если код был проверен и признан идеальным с помощью валидатора HTML W3C.

В качестве временной меры я объединил содержимое второго и третьего DIV.

В Mozilla дела, должно быть, плохи, когда IE7 и FF2 отображаются нормально, но не FF 3.5.

Я дам вам БОЛЬШУЮ подсказку:

<div style="..." class="..."> ... </div>

Если у вас есть что-то в стиле, то document.style подойдет!Если у вас есть что-то в классе, оно не будет отображаться в document.style, а class="..." ПЕРЕОПРЕДИТ это!

Подумайте об этом, и это прояснит МНОГИЕ ПРОБЛЕМЫ.Всего лишь одно это маленькое понимание ИЗБАВИТ вас от этого РАЗУМНОГО ВИРУСА.Хорошего дня.С уважением, Рон Лентьес, LC CLS.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top