Тема, которую мы обсуждаем, — верстка веб-страниц с помощью CSS. Самая неприятная проблема для всех — совместимость браузеров. Хотя 52CSS.com предоставил много знаний в этом направлении, они по-прежнему сбивают с толку многих разработчиков. -три различия между JavaScript и JavaScript в IE и Firefox. Надеюсь, это будет полезно каждому.
1. проблема document.formName.item("itemName") Описание проблемы: В IE вы можете использовать document.formName.item("itemName") или document.formName.elements ["elementName"]; в Firefox вы можете использовать только document.formName.elements["elementName"] .
Решение: используйте document.formName.elements["elementName"] единообразно.
2. Проблемы с объектами коллекции <br /> Описание проблемы: В IE вы можете использовать () или [] для получения объектов коллекции. В Firefox вы можете использовать только [ ] для получения объектов коллекции;
Решение. Используйте [] единообразно для получения объектов класса коллекции.
3. Проблема с пользовательскими атрибутами <br /> Описание проблемы: в IE вы можете использовать метод получения обычных атрибутов для получения пользовательских атрибутов или использовать getAttribute() для получения пользовательских атрибутов; в Firefox вы можете использовать только getAttribute(; ), чтобы получить их.
Решение. Равномерно получите пользовательские атрибуты с помощью getAttribute().
4. Проблема eval("idName") <br /> Описание проблемы: В IE вы можете использовать eval("idName") или getElementById("idName") для получения объекта HTML с идентификатором idName в Firefox; используйте getElementById («idName») только для получения объекта HTML с идентификатором idName.
Решение. Используйте метод getElementById("idName") единообразно, чтобы получить объект HTML с идентификатором idName.
5. Проблема в том, что имя переменной совпадает с идентификатором объекта HTML <br /> Описание проблемы: В IE идентификатор объекта HTML может использоваться непосредственно как имя переменной подчиненного объекта документа, но не в Firefox; в Firefox его можно использовать с объектом HTML. Имена переменных с тем же идентификатором не могут использоваться в IE.
Обходной путь: используйте document.getElementById("idName") вместо document.idName. Лучше не использовать имена переменных с одним и тем же идентификатором объекта HTML, чтобы уменьшить количество ошибок при объявлении переменных, всегда добавляйте ключевое слово var, чтобы избежать двусмысленности;
6. Проблема с константами <br /> Описание проблемы: В Firefox вы можете использовать ключевое слово const или ключевое слово var для определения констант. В IE вы можете использовать только ключевое слово var для определения констант;
Решение. Используйте ключевое слово var единообразно для определения констант.
7. Проблема с атрибутом input.type <br /> Описание проблемы: Атрибут input.type в IE доступен только для чтения, а атрибут input.type в Firefox — для чтения и записи.
Решение. Не изменяйте атрибут input.type. Если вам необходимо изменить его, вы можете сначала скрыть исходный ввод, а затем вставить новый элемент ввода в ту же позицию.
8. Проблема Window.event <br /> Описание проблемы: window.event можно запустить только в IE, но не в Firefox. Это связано с тем, что событие Firefox можно использовать только в той сцене, где оно происходит.
Решение. Добавьте параметр события в функцию, в которой происходит событие, и используйте var myEvent = evt?evt:(window.event?window.event:null) в теле функции (при условии, что формальный параметр — evt).
Пример:
Пример исходного кода [www.downcodes.com] <input type="button" onclick="doSomething(event)"/>
<script Language="JavaScript">
функция doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
Решение: вар myX = event.x? event.x: event.pageX; var myY = event.y? event.y: event.pageY;
Если вы обдумываете вопрос 8, просто используйте myEvent вместо event.
10. Проблема Event.srcElement <br /> Описание проблемы: В IE объект четности имеет атрибут srcElement, но не имеет атрибута target; в Firefox объект четности имеет атрибут target, но не имеет атрибута srcElement.
Решение. Используйте srcObj = event.srcElement? event.srcElement: event.target;
Если вы обдумываете вопрос 8, просто используйте myEvent вместо event.
11. Проблема с Window.location.href <br /> Описание проблемы: В IE или Firefox2.0.x вы можете использовать window.location или window.location.href, в Firefox1.5.x вы можете использовать только window. расположение .
Обходной путь: используйте window.location вместо window.location.href. Конечно, вы также можете рассмотреть возможность использования метода location.replace().
12. Проблемы с модальными и немодальными окнами <br /> Описание проблемы: В IE модальные и немодальные окна можно открыть через showModalDialog и showModelessDialog в Firefox, это невозможно;
Решение: напрямую используйте window.open(pageURL,name,parameters), чтобы открыть новое окно.
Если вам нужно передать параметры из дочернего окна обратно в родительское окно, вы можете использовать window.opener в дочернем окне для доступа к родительскому окну. Если вам нужно родительское окно для управления дочерним окном, используйте var subWindow = window.open(pageURL,name,parameters), чтобы получить вновь открытый объект окна.
13. Проблемы с фреймами и iframe <br /> В качестве примера возьмем следующий фрейм:
<frame src="http://www.downcodes.com/123.html" id="frameId" name="frameName" />
(1) Получите доступ к IE объекта фрейма: используйте window.frameId или window.frameName для доступа к объекту фрейма;
Firefox: используйте window.frameName для доступа к этому объекту фрейма;
Решение. Используйте window.document.getElementById("frameId") единообразно для доступа к этому объекту фрейма;
(2) Чтобы переключить содержимое фрейма, вы можете использовать window.document.getElementById("frameId").src = "52css.com.html" или window.frameName.location = "52css.com.html" как в IE, так и в Firefox. .Содержимое кадра;
Если вам нужно передать параметры из фрейма обратно в родительское окно, вы можете использовать ключевое слово родитель в фрейме для доступа к родительскому окну.
14. Проблема с загрузкой тела <br /> Описание проблемы: объект body в Firefox существует до того, как тег body полностью прочитан браузером; тогда как объект body в IE должен быть загружен после того, как тег body полностью прочитан браузером.
[Примечание] Эта проблема на самом деле не была проверена и будет изменена после проверки.
[Примечание] Было проверено, что указанная выше проблема не существует в IE6, Opera9 и FireFox2. Простой JS-скрипт может получить доступ ко всем объектам и элементам, которые были загружены до сценария, даже если элемент еще не загружен.
15. Метод делегирования событий <br /> Описание проблемы: в IE используйте document.body.onload = inject; если функция inject() была реализована ранее в Firefox, используйте document.body.onload = inject();
Решение: используйте document.body.onload=new Function('inject()'); или document.body.onload = function(){/* Вот код */}
[Примечание] Разница между функцией и функцией
16. Различия в доступе к родительским элементам <br /> Описание проблемы: в IE используйте obj.parentElement или obj.parentNode для доступа к родительскому узлу obj; в Firefox используйте obj.parentNode для доступа к родительскому узлу obj;
Решение. Поскольку и Firefox, и IE поддерживают DOM, obj.parentNode используется для доступа к родительскому узлу obj.
17. курсор: рука VS курсор: указатель
Описание проблемы: Firefox не поддерживает руку, но IE поддерживает указатель. Оба являются ручными инструкциями.
Решение: используйте указатель равномерно.
18. Проблемы с внутренним текстом.
Описание проблемы: в IE index работает нормально, а в FireFox не работает.
Решение. Используйте textContent вместо InnerText в браузерах, отличных от IE.
Пример:
Пример исходного кода [www.downcodes.com] if(navigator.appName.indexOf("Проводник") >-1){
document.getElementById('element').innerText = "мой текст";
} еще{
document.getElementById('element').textContent = "мой текст";
}
19. Проблема с назначением ширины и высоты объекта <br /> Описание проблемы: Операторы, подобные obj.style.height = imgObj.height в FireFox, недействительны.
Решение: используйте obj.style.height = imgObj.height + 'px';
20. Проблемы с работой таблиц <br /> Описание проблемы: IE, Firefox и другие браузеры выполняют разные операции с тегом таблицы. В IE не допускается присвоение таблицы и tr с помощью js. Использование. метод AppendChild тоже не работает.
Решение:
Пример исходного кода [www.downcodes.com] //Добавляем в таблицу пустую строку:
вар строка = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(ячейка);
21. Проблема с отступами в списках ul и ol <br /> При устранении отступов в списках ul, ol и других списках стиль следует писать так: list-style:none;margin:0px;padding:0px;
Атрибут поля действителен для IE, а атрибут заполнения действителен для FireFox. ← Это предложение неверно выражено, подробности см. ↓
[Примечание] Эта проблема на самом деле не была проверена и будет изменена после проверки.
[Примечание] Было проверено, что в IE установка поля:0px может удалить верхние, нижние, левые и правые отступы, пробелы, а также номера или точки списка. Настройка заполнения не влияет на стиль в Firefox. установка поля: 0px позволяет удалить только верхний и нижний отступы. После установки заполнения: 0 пикселей вы можете удалить только левый и правый отступы. Вы также должны установить list-style: none, чтобы удалить номера списка или точки. Другими словами, в IE для достижения окончательного эффекта можно установить только поля Margin:0px, тогда как в Firefox для достижения окончательного эффекта необходимо установить одновременно поля Margin:0px, Padding:0px и list-style:none.
22. Проблема прозрачности CSS IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
ФФ: непрозрачность: 0,6.
[Примечание] Лучше всего написать оба и поместить атрибут непрозрачности ниже.
23. Проблема с закругленными углами CSS. IE: версии ниже ie7 не поддерживают закругленные углы.
FF: -moz-border-radius:4px или -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- радиус-нижний правый: 4 пикселя;.
[Примечание] Проблема с закругленными углами — это классическая проблема в CSS. Рекомендуется использовать набор фреймов JQuery для установки закругленных углов и оставить решение этих сложных проблем другим.
В CSS слишком много проблем, и даже одно и то же определение CSS имеет разные эффекты отображения в разных стандартах страниц. Для получения дополнительной информации обратитесь к статье на 52CSS.com. В рамках разработки предлагается, чтобы страница была написана с использованием стандартного стандарта DHTML с меньшим использованием таблиц. Определение CSS должно быть максимально основано на стандартном DOM, принимая во внимание основные браузеры, такие как IE. , Фаерфокс и Опера. Кстати, во многих случаях стандарты интерпретации CSS FF и Opera ближе к стандартам CSS и более нормативны. 