За рубежом есть много отличных статей, из которых можно поучиться, поэтому я решил потратить некоторое время на их перевод. Я не знаю, перевел ли кто-нибудь эту статью. Оригинальное название — «10 ужасных ошибок и исправлений IE» . Надеюсь, эти замечательные статьи смогут прочитать больше людей. Иностранцы очень юморные, поэтому я прочитал весь текст. Эксперты пошли в обход
Ниже приводится перевод :
Я перечислил 10 распространенных ошибок IE и их решения. Я считаю, что это поможет вам сократить время, затрачиваемое на отладку несоответствий макета в IE.
Автор: Кевин
Введение
У каждого своя история борьбы с IE. Как разработчику мне приходится сталкиваться со многими особенностями IE, и иногда хочется просто биться головой о стену. Но со временем мы многому научились (иногда это была не наша вина, а вина IE!) и начали принимать и понимать странное поведение IE. Мы должны это сделать, поскольку по-прежнему существует значительное количество пользователей IE6. Лучше всего с самого начала постоянно тестировать свой сайт в разных браузерах. Гораздо проще решить проблемы с версткой с самого начала, чем после тысяч строк кода HTML и CSS.
Существует множество движений против IE6, поддерживаемых большинством веб-экспертов и обычных пользователей, которых, похоже, это не особо заботит. Итак, что мы можем сделать сейчас? Нам пришлось продолжать копать, чтобы решить проблему с IE6. Но подождите, есть интересные новости. Согласно ежемесячному отчету w3cschool, число пользователей IE6 с годами уменьшилось. С 60,3% в июне 2006 г. до 13,6% в сентябре 2009 г. Согласно этому соотношению, мы сможем отказаться от IE6 к концу 2010 года (Аннотация: Ситуация за рубежом действительно хорошая~.~)
Хорошо, вернемся к реальности: я составил список всех проблем, с которыми сталкивался раньше, для дальнейшего использования. Я считаю, что это поможет вам сократить время, затрачиваемое на отладку несоответствий макета в IE.
1. Призрачный текст IE6 (ошибка призрачного текста)
Прежде чем написать эту статью, я столкнулся с этой ошибкой. Это довольно странно и забавно. Кусок дублированного текста, возникший из ниоткуда, отображается в IE6 рядом с исходным текстом. (Аннотация: вы также можете обратиться к разделу «Ошибка дублирования символов в Explorer 6» для демонстрации ошибки). Я не смог это исправить, поэтому поискал и, конечно же, это еще одна ошибка IE6.
Для этого существует множество обходных путей, но ни один из них не сработал для моего примера (некоторые из них я не смог использовать из-за сложности сайта). Поэтому я использовал хак. Добавление пробелов после исходного текста, кажется, решает проблему.
Однако из блога Hippy Tech я узнал, что причина проблемы связана с тегами комментариев html. IE6 не может правильно его отобразить. Вот список предлагаемых им решений:
Решение :
2. Позиция относительно и переполнение скрыто
Я сталкивался с этой проблемой много раз, когда готовил руководство по JQuery, потому что для достижения желаемого макета я использовал много скрытого переполнения.
Проблема возникает, когда для переполнения родительского элемента установлено значение «скрыто», а для дочернего элемента установлено значение «позиция: относительное».
В CSS-Trick есть отличный пример, демонстрирующий эту ошибку. позиция: относительная и переполнение в Internet Explorer
Решение :
Добавьте позицию: относительно родительского элемента;
3. Минимальная высота для IE
Все просто: IE игнорирует атрибут min-height. Вы можете использовать хак ниже, чтобы исправить это. Спасибо Дастину Диасу .
Это решение хорошо работает в IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2.
Решение :
селектор {
минимальная высота: 500 пикселей;
высота: авто! важно;
высота: 500 пикселей;
}