style.display не работает в Firefox, Opera, Safari - IE7 OK - PullRequest
8 голосов
/ 14 августа 2008

У меня есть абсолютно позиционированный 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 вместо вызова функции
  • Тестирование с разных машин

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

Ответы [ 9 ]

7 голосов
/ 14 августа 2008

Можете ли вы предоставить некоторую разметку, которая воспроизводит ошибку? Ваша ситуация должна быть как-то связана с вашим кодом, так как я могу заставить его работать на 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>
6 голосов
/ 14 августа 2008

Поскольку установка свойств с помощью 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 .

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

5 голосов
/ 29 мая 2009

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

document.getElementById('editRow').style.display = '';
2 голосов
/ 18 апреля 2011

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

Старый DOCTYPE / html spec

<!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>
1 голос
/ 05 августа 2011

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

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

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

var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';
1 голос
/ 14 августа 2008

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

1 голос
/ 14 августа 2008

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

0 голосов
/ 14 июня 2013

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

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

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

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

0 голосов
/ 22 ноября 2009

Существует раздражающая ошибка отображения в Firefox 3.5, но не в IE7 или Firefox 2.0.9

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

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

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

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