1. document.formName.item("itemName") Описание проблемы: в IE вы можете использовать document.formName.item("itemName") или document.formName.elements ["elementName"] в Firefox, вы можете использовать только в Firefox; документ .formName.elements["elementName"].
Решение: используйте document.formName.elements["elementName"] единообразно.
2. Проблема с объектом коллекции. Описание: В IE вы можете использовать () или [] для получения объектов коллекции; в Firefox вы можете использовать только [ ] для получения объектов коллекции.
Решение. Используйте [] единообразно для получения объектов коллекции.
3. Проблема с пользовательскими атрибутами. Описание. В IE вы можете использовать метод получения обычных атрибутов для получения пользовательских атрибутов или использовать getAttribute() для получения пользовательских атрибутов. В Firefox вы можете использовать только getAttribute() для получения пользовательских атрибутов; .
Решение. Равномерно получите пользовательские атрибуты с помощью getAttribute().
4. eval("idName") Описание проблемы. В IE вы можете использовать eval("idName") или getElementById("idName") для получения объекта HTML с идентификатором idName; в Firefox вы можете использовать только getElementById(" idName" ), чтобы получить HTML-объект с идентификатором idName.
Решение. Используйте getElementById("idName") единообразно, чтобы получить объект HTML с идентификатором idName.
5. Проблема в том, что имя переменной совпадает с идентификатором объекта HTML. Описание проблемы: в IE идентификатор объекта HTML может использоваться непосредственно как имя переменной подчиненного объекта документа, но не в нем. Firefox; в Firefox можно использовать переменную с тем же идентификатором, что и у объекта HTML, но не в IE.
Обходной путь: используйте document.getElementById("idName") вместо document.idName. Лучше не использовать имена переменных с одним и тем же идентификатором объекта HTML, чтобы уменьшить количество ошибок при объявлении переменных, всегда добавляйте ключевое слово var, чтобы избежать двусмысленности;
6. Описание проблемы Const: В Firefox вы можете использовать ключевое слово const или ключевое слово var для определения констант. В IE вы можете использовать только ключевое слово var для определения констант;
Решение. Используйте ключевое слово var единообразно для определения констант.
7. Проблема с атрибутом input.type Описание проблемы: атрибут input.type в IE доступен только для чтения, а атрибут input.type в Firefox доступен для чтения и записи;
Решение. Не изменяйте атрибут input.type. Если вам необходимо изменить его, вы можете сначала скрыть исходный ввод, а затем вставить новый элемент ввода в ту же позицию.
8. Проблема Window.event Описание проблемы: window.event можно запустить только в IE, но не в Firefox. Это связано с тем, что событие Firefox можно использовать только в той сцене, где оно происходит.
Решение. Добавьте параметр события в функцию, в которой происходит событие, и используйте var myEvent = evt?evt:(window.event?window.event:null) в теле функции (при условии, что формальный параметр — evt).
Пример:
программный код
<input type="button" onclick="doSomething(event)"/>
<script Language="JavaScript">
функция doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
</скрипт>
9. Event.x и event.y Описание проблемы. В IE объект четности имеет атрибуты x и y, но не имеет атрибутов pageX и pageY. В Firefox объект четности имеет атрибуты pageX и pageY, но не имеет атрибутов x и y.
Решение: вар myX = event.x? event.x: event.pageX; var myY = event.y? event.y: event.pageY;
Если вы обдумываете вопрос 8, просто используйте myEvent вместо event.
10. Проблема Event.srcElement Описание проблемы: в IE четный объект имеет атрибут srcElement, но не имеет атрибута target; в Firefox четный объект имеет атрибут target, но не имеет атрибута srcElement.
Решение. Используйте srcObj = event.srcElement? event.srcElement: event.target;
Если вы обдумываете вопрос 8, просто используйте myEvent вместо event.
11. Проблема с Window.location.href Описание проблемы: В IE или Firefox2.0.x вы можете использовать window.location или window.location.href, в Firefox1.5.x вы можете использовать только window.location.
Обходной путь: используйте window.location вместо window.location.href. Конечно, вы также можете рассмотреть возможность использования метода location.replace().
12. Проблемы с модальными и немодальными окнами Описание проблемы: В IE модальные и немодальные окна можно открыть через showModalDialog и showModelessDialog в Firefox, это невозможно;
Решение: напрямую используйте метод window.open(pageURL,name,parameters), чтобы открыть новое окно.
Если вам нужно передать параметры из дочернего окна обратно в родительское окно, вы можете использовать window.opener в дочернем окне для доступа к родительскому окну. Если вам нужно родительское окно для управления дочерним окном, используйте var subWindow = window.open(pageURL,name,parameters), чтобы получить вновь открытый объект окна.
13. В качестве примера при рассмотрении вопроса о кадре и i-кадре можно привести следующий кадр:
<frame src=" http://www.abc.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 = "index.html" или window.frameName.location = "index.html" для переключения содержимого фрейма в обоих IE. и Фаерфокс;
Если вам нужно передать параметры из фрейма обратно в родительское окно, вы можете использовать ключевое слово родитель в фрейме для доступа к родительскому окну.
14. Проблема с загрузкой тела Описание проблемы: объект body в Firefox существует до того, как тег body полностью прочитан браузером, тогда как объект body в IE должен существовать после того, как тег body полностью прочитан браузером;
[Примечание] Эта проблема на самом деле не была проверена и будет изменена после проверки.
[Примечание] Было проверено, что указанная выше проблема не существует в IE6, Opera9 и FireFox2. Простой JS-скрипт может получить доступ ко всем объектам и элементам, которые были загружены до сценария, даже если элемент еще не загружен.
15. Объяснение проблемы с методом делегирования событий: в IE используйте document.body.onload = inject; если функция inject() была реализована ранее в Firefox, используйте document.body.onload = inject();
Решение: используйте document.body.onload=new Function('inject()'); или document.body.onload = function(){/* Вот код */}
[Примечание] Разница между функцией и функцией
16. Разница между родительскими элементами, к которым осуществляется доступ. Описание вопроса: в 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.
Пример:
программный код
if(navigator.appName.indexOf("Проводник") >-1){
document.getElementById('element').innerText = "мой текст";
} еще{
document.getElementById('element').textContent = "мой текст";
}
[Примечание] InternalHTML поддерживается одновременно такими браузерами, как IE и Firefox. Другие, такие как externalHTML, поддерживаются только IE, и их лучше не использовать.
19. Проблема с назначением ширины и высоты объекта. Описание проблемы: Операторы, подобные obj.style.height = imgObj.height в FireFox, недействительны.
Решение: единообразно используйте obj.style.height = imgObj.height + 'px'
20. Проблема с работой таблицы. Описание проблемы: IE, Firefox и другие браузеры выполняют разные операции с тегом таблицы, что не разрешено в IE. Для назначения InternalHTML; таблицы и tr, при использовании js для добавления tr использование метода AppendChild не работает.
Решение:
программный код
//Добавляем в таблицу пустую строку:
вар строка = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(ячейка);
[Примечание] Поскольку я редко использую JS для непосредственной работы с таблицами, я никогда не сталкивался с этой проблемой. Для работы с таблицами рекомендуется использовать среду JS, например JQuery.
21. Проблема с отступами в списках ul и ol. При устранении отступов в списках 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 имеет разные эффекты отображения в разных стандартах страниц. Предложение, соответствующее развитию, заключается в том, что страница должна быть написана с использованием стандартных стандартов DHTML, с меньшим использованием таблиц. Определения CSS должны быть максимально основаны на стандартном DOM, принимая во внимание основные браузеры, такие как IE, Firefox. и Опера. Кстати, во многих случаях стандарты интерпретации CSS FF и Opera ближе к стандартам CSS и более нормативны.