Отображение стилей не работает в Firefox, Opera, Safari - (IE7 в порядке)
У меня есть абсолютно позиционируемый div, который я хочу показать, когда пользователь щелкает ссылку. onclick ссылки вызывает функцию js, которая устанавливает отображение блока в блоке (также пробовали: "", inline, table-cell, inline-table и т. д.). Это отлично работает в IE7, а не во всех других браузерах, которые я пробовал (FF2, FF3, Opera 9.5, Safari).
Я пробовал добавлять предупреждения до и после звонка, и они показывают, что дисплей изменился с none на block, но div не отображается.
Я могу заставить div отображаться в FF3, если я изменю отображаемое значение с помощью инспектора Firebug HTML (но не путем запуска javascript через консоль Firebug), поэтому я знаю, что он не просто отображается за пределами экрана и т. д.
Я перепробовал все, что мог придумать, в том числе:
- Использование другого типа документа (XHTML 1, HTML 4 и т. д.)
- Использование видимости видимый / скрытый вместо блока отображения / отсутствия
- Использование встроенного javascript вместо вызова функции
- Тестирование с разных машин
Есть идеи о том, что могло вызвать это?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 9
Проверьте консоль ошибок (меню «Инструменты»> «Консоль ошибок» в Firefox 3), чтобы убедиться, что не происходит другой ошибки, которую вы не видите и которая останавливает работу вашего скрипта.
Можете ли вы предоставить разметку, воспроизводящую ошибку?
Ваша ситуация должна иметь какое-то отношение к вашему коду, поскольку я могу заставить это работать в 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>Попробуйте установить высоту и ширину div и убедитесь, что он находится наверху, установив его z-index выше, чем у всего остального. Если абсолютно позиционированный div находится внутри относительно позиционированного элемента, его верхнее и левое положение основываются на верхнем и левом углу относительно позиционированного элемента. Попробуйте поместить свой div прямо под элемент body.
Поскольку установка свойств с помощью javascript никогда не работала, но установка с использованием Firebug inspect работала, я начал подозревать, что селектор идентификатора 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.
Всем, кто ответил, спасибо за вашу помощь!
Таким образом, если вы имеете в виду, что у вас было несколько имен идентификаторов на одной странице, это недопустимо, поскольку имена идентификаторов могут появляться на странице только один раз и должны быть уникальными для одного элемента.
Нашел ответ: Мне нужно использовать следующее, чтобы он работал в обоих браузерах:
document.getElementById('editRow').style.display = '';
Это сработало для меня с аналогичной проблемой, когда Safari не установил блокировку дисплея: Мое исправление заключалось в том, чтобы сделать document.getElementById('editRow').style.display = '';, а затем document.getElementById('editRow').style.display = 'block'; - протестировано на IE11, Chrome, последней версии Safari по состоянию на август 2016
В Firefox 3.5 появляется раздражающая ошибка отображения, но не в IE7 или Firefox 2.0.9.
У меня абсолютная позиция 3 DIV - первая с простым текстом; второй с меню CSS (тип молока с UL и LI) и третий то же самое. Третий не будет отображаться вообще, даже если кодировка была проверена и признана идеальной с помощью валидатора HTML W3C.
В качестве временной меры я объединил содержимое второго и третьего DIV.
В Mozilla должно быть плохо, когда IE7 и FF2 отображаются нормально, но не FF 3.5.
Тогда ваша разметка должна быть хуже, потому что если ваша разметка работает в IE, но не в FF, ваша разметка является проблемой. Но начните свою ветку и покажите нам, что у вас есть, чтобы мы могли исправить это за вас.
На самом деле я столкнулся с той же проблемой, которую вы здесь описываете. Что на самом деле решило мою проблему, так это изменение свойств документа.
Старая спецификация 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>
Вы должны написать метод window.onload:
window.onload = document.getElementById('testdiv').style.display='inline';
Или вы также можете создать переменную:
var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';
Я дам вам БОЛЬШУЮ подсказку:
<div style = "..." class = "..."> ... </div>
Если у вас есть что-то стильное, то document.style подойдет! Если у вас есть что-то в классе, это не будет отображаться в document.style, а class = "..." будет ПЕРЕПРЕРЫВАТЬ это!
Подумайте об этом, и это прояснит ТАК МНОГО ВОПРОСОВ. Одно лишь это маленькое понимание ИЗБАВИТ вас от ВИРУСА РАЗУМА. Хорошего дня. Ура, Рон Лентес, LC CLS.
У меня была эта проблема, но я использовал трюк IE, просто вызывая элемент по его идентификатору, не ища его сначала:
testDiv.style.display = 'block';