С какими проблемами Cross-Browser вы столкнулись?

Ответ 1

Большинство проблем, с которыми я столкнулся, - это IE, в частности IE6. Проблемы, с которыми я лично сталкиваюсь, оставили незабываемое впечатление (в определенном порядке):

• Необходимо использовать фреймворки для выполнения основных вещей, потому что каждый браузер реализует DOM немного по-другому. Это особенно отвратительно с IE и AJAX, что требует нескольких if-блоков только для начала вызова. В идеальном мире я бы мог работать на JavaScript без рамки, чтобы делать основные вещи.

• onChange on selects in IE реализованы неправильно, и огонь перед тем, как выбор теряет фокус (это неверно). Это означает, что вы никогда не сможете использовать onChange с выбором из-за IE, поскольку пользователи, работающие только с клавиатурой, будут искалечены этой проблемой реализации.

• Вы упомянули об этом в своем сообщении, но это огромная боль, когда IE захватывает элемент по имени при использовании getElementBy Id().

• Когда в языковой версии RTL (арабском, иврите и т.д.) Firefox реализует "text-align: right;"; неправильно. Если контейнер по какой-то причине переполняется, текст выравнивается с правой стороны видимого контейнера, а не справа от самого контейнера (даже если он делает его невидимым).

• В разных браузерах различаются уровни соблазнения в отношении того, как вы заканчиваете массивы и объекты. Например, Firefox более чем в порядке с массивом, похожим на этот: [item0, item1,] ". Однако этот же код сделает bar bar, потому что он ненавидит конечную запятую. IE сделает массив массивом из трех элементов, с третьим пунктом undefined! Это плохой код, но был динамически сгенерированный javascript, над которым я работал, это была огромная боль, чтобы переписать - было бы хорошо, если бы это только сработало.

• Все, что связано с IE hasLayout. Столь ужасная боль вращалась вокруг этого атрибута, особенно когда я не знал, что он существует. Так много проблем исправлено с помощью хаков для добавления hasLayout. В результате хаков появилось еще много проблем.

• Поплавки в IE редко работают так, как вы надеетесь. Они также склонны раздражать других браузеров, но они, по крайней мере, соответствуют определенному поведению.;)

• IE добавляет лишнее пустое пространство между элементами списка, не вызвало у меня никакой боли, поскольку YUI использует списки для создания своих меню. (Чтобы полностью понять проблему, вы должны просмотреть эту ссылку в IE и другом браузере бок о бок.)

• У меня много проблем с тем, чтобы текст не переносился в контейнеры в IE. Другие браузеры прослушивают "white-space: nowrap" намного лучше. Это была проблема с пользовательским интерфейсом, с которым я работал, который имеет изменяемую размерную панель; в IE элементы боковой панели начнут обертываться, если вы слишком сильно измените размер.

• Отсутствие множества типов селекторов CSS в IE6 означает, что вам необходимо классифицировать свой DOM больше, чем необходимо. Например, отсутствие +,: hover,: first-child.

• Различные браузеры обрабатывают пустые текстовые узлы по-разному. В частности, при обходе DOM с Opera мне приходится беспокоиться о пустых текстовых узлах при просмотре дочерних элементов node. Это не проблема, если вы ищете какой-то конкретный элемент, но это если вы пишете код, ожидающий конкретного ввода, и то, как браузер видит, что вход отличается.

• В IE6, когда вы динамически генерируете iframe через javascript, iframe иногда не заполняет свой контейнер автоматически (даже с шириной и высотой, установленной на max). Я до сих пор не знаю, как решить эту проблему, и думал о публикации вопроса об этом.

• В IE вы не можете установить переполнение CSS в элементе <tbody> . Это означает, что прокручиваемые таблицы (с бетоном <thead> и <tfoot> ) невозможно сделать простым способом.

Я, вероятно, добавлю еще немного к этому списку позже, поскольку (для меня) худшая часть веб-разработки связана с кросс-браузерными проблемами. Кроме того, я сомневаюсь, что когда-нибудь отредактирую "Я, вероятно, добавлю больше к этому списку позже", так как эти проблемы бесконечны.:)

Ответ 2

Единственное, что действительно достается мне:

• IE6 по-прежнему используется ~ 18% веб-сайта - это почти 1 из 5 - и решение его проблем требует много времени, хаки и разочарования.;) проблемы действительно слишком многочисленны, чтобы перечислять здесь.

Если вас интересуют сами проблемы, QuirksMode.org - это удивительный ресурс, который я использовал каждый день, прежде чем совершать прыжок на клиент- сторонних библиотек. Также проверьте John Resig Презентация DOM - это беспроигрышная презентация на yahoo, которая дает много теории о том, как эффективно работать с кросс-браузерными темами.

Однако, если вам интересно просто решить их, ваш вопрос является отличным примером того, почему многие считают использование библиотек на стороне клиента, таких как jQuery, YahooUI, MooTools, Dojo и т.д. Благодаря процветающему сообществу талантливые люди и корпоративные проекты поддержки, подобные этим, позволяют сосредоточиться на своем приложении, а не на этих проблемах.

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

Перекрестная привязка между браузерами

$('#select anything + you[want=using] ~ css:selectors').click(
    function(){ 
       alert('hi');
    }
); 

Кросс-браузерная инъекция HTML

$('#anElementWithThisId').html('<span>anything you want</span>');

Кросс-браузер Ajax (все объекты запроса все еще доступны для вас)

$('p.message').load('/folder/file.html');

И что действительно ударит меня, загрузите подмножество данных с помощью селекторов (подробнее см. руководство)

$('p.message').load('/folder/file.html body p:first-child');

Теперь, как все это действительно начинает получать удовольствие: цепочки методов вместе

$('ul.menu a').click(           // bind click event to all matched objects
  function(evt){                // stnd event object is the first parameter
    evt.preventDefault();       // method is cross-browser thx to jquery
    $(this)                     // this = the clicked 'a' tag, like raw js
      .addClass('selected')     // add a 'selected' css class to it
      .closest('ul.menu')       // climb the dom tree back up to the ul
      .find('a.selected')       // find any existing selected dom children
      .not(this)                // filter out this element from matches
      .removeClass('selected'); // remove 'selected' css class
  }
)

Напоминает мне о Joel Может ли ваш язык программирования делать это?.

Принимая все это на теоретический уровень, истинное продвижение происходит не от того, что вы можете делать с сознательной мыслью и усилием, а скорее, что вы можете делать автоматически (без мысли или усилий). У Джоэла есть сегмент на Smart и Gets Things Done, касающийся вопросов интервью и умных разработчиков, полностью изменивших мой подход к программированию.

Подобно пианисту, который может просто "играть" музыку, потому что она знает все ключи, ваше продвижение происходит не от того, чтобы делать больше вещей, требующих мысли, а скорее для большего количества вещей, которые не требуют никакой мысли. Цель тогда становится сделать все основы легкими.. естественными.. подсознательными.. так что мы все можем выискивать на наших постах более высокого уровня.

Библиотеки на стороне клиента, в некотором смысле, помогают нам в этом.;)

Ответ 3

IE6? Мех. Вам, ребята, легко! Вам никогда не приходилось делать работу с CSS в Netscape 4 (без сбоев всего браузера)? Вам никогда не приходилось писать для браузеров устройств, которые не поддерживают таблицы? Вам никогда не приходилось писать для IE Mobile?

• поддержка JavaScript-назначенных обработчиков событий отсутствует; вы можете только написать обработчик событий, установив "onclick =" somestring "" в innerHTML;

• основные свойства DOM уровня 1 (например, nodeName, nodeType, nodeValue, firstChild, lastChild, nextSibling, previousSibling, data, value, HTMLElement.getElementsByTagName, все элементы HTMLTableElement, большинство членов CSSStyleDeclaration) просто не существуют;

• большинство свойств макета CSS не работают; многие простые свойства CSS, такие как "ширина не работают на некоторые элементы, такие как поля формы;

• настройка многих других свойств CSS для таких элементов, как таблицы и поля формы, вызывает зависание браузера, что, поскольку Windows Mobile не имеет встроенного диспетчера задач, означает, что вам нужно мягко reset устройство;

• oh, и добавление чего-либо, кроме текста внутри кнопки < button, также нестабильно:

• огромные куски базовых методов JavaScript и методы DOM Level 0, возвращающиеся до Netscape 2 (!), отсутствуют.

И это самая последняя версия флагманского браузера Windows Mobile от Microsoft в 2009 году.

Конечно, он поддерживает XMLHttpRequest, но написание кода AJAX в браузере, поддержка CSS и script меньше IE3 (!), причудливо шизофренична, например, вы работаете со странной амальгамой 21-го века и 19- века.

Я бы не рекомендовал его.

Ответ 4

Делать это слишком долго, чтобы иметь много проблем, но он все равно меня раздражает, что я должен взломать IE-не-поддержку для CSS-вещей, таких как display: table,: last-child и: hover вне привязок.

Все вещи IE все еще сумасшедшие, но теперь это просто безумие фона:)

Ответ 5

Самая большая проблема с перекрестным браузером? - Internet Explorer!

<start_grumpy >

IE исключительно отвечает за "сдерживание сети" - разработчики не могут создавать удивительные сайты с использованием HTML5, SVG или XFORMS или CANVAS... не из-за Firefox, Safari или Chrome, но потому, что 2/3s Интернета все еще застряли в IE. Не говоря уже о том, что ~ 20% сети все еще застряли на IE6! IE8 - это первая версия IE, по крайней мере, try, совместимая со стандартами (стандарты 2001 года), что означает, что она будет как минимум 2018, прежде чем мы сможем наконец начать отбрасывать вся поддержка IE7.

</start_grumpy >

В противном случае укажите метод DOM, который IE полностью поддерживает... тот факт, что это трудный вопрос для ответа, является моей самой большой проблемой CrossBrowser.

getElementById() - badly broken
getElementsByName() - buggy
getElementsByTagName() - buggy
getAttribute() - buggy
setAttribute() - majorly broken
createElement() - buggy
appendChild() - buggy

даже вещи, изобретенные IE, испорчены...

innerHTML (getting) - returns the worst markup possible
innerHTML (setting) - doesn't work on the elements you'd want to dump a bunch of data into (e.g. Tables and Selects)

Ответ 6

В Internet explorer (обратите внимание: более старые версии IE, не обязательно версии 9/10 +), если вы создаете элементы формы с помощью document.createElement, поле не будет отправлено с формой. Единственным обходным решением является использование

element.innerHTML = "<input type='text' value="+val+" name="+name+">";

Ответ 7

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

Я не помню специфику, но я помню, что это было очень неприятно.

Ответ 8

Это, в основном.

Современные фреймворки javascript (jQuery, прототип и т.д.) сделали чудеса для получения кода, работающего во множестве браузеров одновременно.

Самая большая проблема, с которой я сталкиваюсь сейчас, заключается в том, что любое разновидность богатого пользовательского интерфейса работает очень медленно. IE7 плохой. IE6 хуже. IE8 глючит, наполовину закончен и действительно не лучше IE7.

Хуже всего то, что я не думаю, что мы когда-нибудь будем свободны от IE6. Это было так повсеместно, и так чертовски причудливо. Нагрузки "предприятия" (и я имею в виду большие веб-приложения, сделанные одной крупной компанией для другой крупной компании), приложения использовали очень специфический JavaScript-код IE6, который даже не работает в IE7, неважно, что-нибудь еще.

Компании не могут позволить себе полностью заменить эти приложения - мы пытаемся продать их новые, и это означает, что поддержка IE6 является обязательной. Как сейчас, когда кредитные компании сокращают расходы, я полагаю, что мы по-прежнему будем поддерживать IE6 в 2015 году: - (

Ответ 9

В IE вы не можете скрыть элементы выбора, только сам элемент select. Это затрудняет динамическое изменение содержимого опций выбора с помощью Javascript.

Эта проблема также существует в Safari и Chrome.

Есть много других проблем с IE, но это вызвало у меня наибольшее разочарование.

Ответ 10

Ограничения IE на использование DOM-манипуляций на таблицах заставили меня совсем по-другому подойти к чему-то. Очень разочаровывающе с самого начала, но положительное из этого было то, что второй подход был в конечном счете лучше, поэтому я полагаю, что я должен быть благодарен IE.;)

Ответ 11

Для Firefox, чтобы получить полные данные, вам нужно либо использовать node.normalize, прежде чем вы вызовете node.firstChild или используйте node.textContent, оба из которых являются особыми методами Mozilla

На самом деле все эти методы W3C DOM поддерживаются подавляющим большинством браузеров. Я думаю, вы обнаружите, что они также работают в IE.

Моя самая большая проблема с кросс-браузером заключается в том, что есть люди, которые все еще используют IE.

Вторым по величине является то, что даже в браузерах, ориентированных на стандарты, делать некоторые вещи в CSS все еще невозможно; например, tbody {overflow:auto} ничего не делает ничего полезного, кроме Gecko, и даже там он имеет ошибки.

Ответ 12

В Firefox и IE есть разные настройки таблицы в DOM, в одном из них все дочерние элементы ячейки - это другие ячейки, в то время как у других есть элементы между ячейками. Я не могу вспомнить, где это происходит, но это дало мне настоящую головную боль в одном приложении.

Ответ 13

Моя самая большая проблема - разработчики браузеров. Высокомерный маленький * ^ и% s. Я имею в виду, что вы никому не можете продавать браузер, но все находятся в их маленьком углу, пытаясь сделать друг друга, только создавая разделение. Ох и Хром. Chrome по-прежнему не знает, чего он хочет, Safari или Firefox. Помимо его одноразового трюка, он практически бесполезен. Я обвиняю всех вас, ребята, которые продолжали поиски в Интернете только потому, что вы ненавидите монополий. Угадайте, что они сейчас монополисты. Теперь мы все можем наслаждаться вторым тарифом, преждевременно запущенным программным обеспечением.

В основном это связано с ошибкой *, которую я сегодня имел в Chrome, мне никогда не приходило в голову запрашивать браузер. Оба Safari и Chrome терпят неудачу, поэтому я решил, что, как только я исправил проблему Safari, Chrome будет исправлен автоматически, но о нет. Г-н. "Я запускаю вкладки в отдельных процессах". "АКА". "Нет полного экрана" просто нужно было держать меня в замке ящерицы с его невероятной реализацией.

Я также ненавижу Firefox. Я не могу сказать, есть ли у меня заражение вирусом или Firebug. Теперь, пока Adobe не решит выпустить браузер, который делает Flash практичным для вещей, отличных от клипов, у меня в значительной степени будет что-то, что надоело в течение долгого времени. И мы все знаем, в чем заключается жизнь.

Кроме того, мне нравится только программирование, когда я сталкиваюсь с нелепыми ошибками, которые заставляют мои мозговые соки работать.

Ответ 14

Несоответствия в модели поля CSS при работе с формами. В частности, это раздражает то, как каждый браузер обрабатывает <select> Вставка

Ответ 15

Мой единственный кошмар - это IE6, вы всегда должны искать хаки, но каждый раз, когда вы сталкиваетесь с проблемой, есть кто-то, кто столкнулся с ним перед вами и сообщил об этом (и мы никогда не убежим от него)

Ответ 16

Я работал над макетом CSS, написанным кем-то, кто считал, что размер, заданный элементу, - это размер + дополнение + граница, как в IE5, а не только поле содержимого, как описано в официальной спецификации. Это было написано всего несколько месяцев назад, поэтому он сделал грязные хаки, чтобы хорошо выглядеть в IE7. Мне потребовалось несколько часов с FireBug, чтобы отследить источник проблемы, и к тому времени, когда я понял, что это действительно раздражало.

Если вы открываете сайт с "плавающим" CSS, написанным для IE5 в Firefox, в коробках просто недостаточно места для размещения и падения страницы. Если вы откроете его в IE7, он выглядит хорошо, так как IE7 позволяет границам перекрываться, поэтому выглядит почти корректно. Для кого-то, как неопытного, как меня, было трудно заметить.

Ответ 17

Чтобы удалить границы iframe в Internet Explorer, вы должны указать атрибут frameborder как формат camelCase, который не соответствует xhtml.

<iframe frameBorder="0"/>

Ответ 18

Простым способом помочь с неприятными проблемами отображения IE является использование firebug, Yep enen в IE 6/7/8 Просто используйте Firebug Lite

Если вы добавите следующее в качестве закладки и вставьте его на панель инструментов, это позволит отключить firebug с любой веб-страницы одним щелчком мыши. (только проверьте это в IE, и он отлично работает.)

javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);