Хотя в браузере может быть много ошибок, это не значит, что есть ошибки, когда вы чувствуете себя иначе. Причин проблемы может быть много, поэтому производителю необходимы определенные методы устранения проблемы.
Для тестирования разумно выбрать расширенный браузер, например Opera 9.2, Firefox 2.0 или Safari 3.0, который лучше поддерживает CSS 2.1. Не используйте IE 6 в качестве единственного браузера для тестирования, поскольку с IE 6 больше всего проблем. что очень неблагоприятно для производителей (особенно новичков) для понимания спецификаций CSS 2.1 и определения корректности работы браузера.
Если тест верен в продвинутых браузерах, но есть проблема в IE, то в принципе можно определить, что проблема в IE.
Если отображение в продвинутых браузерах некорректное, вы можете сначала сделать следующее предварительное заключение:
1. Правильно ли написание, вы можете использовать проверку W3C или функцию проверки программного обеспечения для редактирования веб-страниц, чтобы проверить, совпадают ли теги в документе (X)HTML, правильный ли порядок вложения, есть ли пустые теги. закрыты, и правильно ли написание CSS. Неправильная вложенность и неправильное написание — очень распространенные ошибки.
Совет: Сейчас существует множество программ для редактирования, которые могут предоставлять функции проверки (X)HTML и CSS, включая поддержку браузером атрибутов CSS и т. д. Например: Dreamweaver 8 или выше, TopStyle и другое программное обеспечение.
Совет: Дополнительное программное обеспечение «Firebug» в Firefox — очень полезный инструмент. Оно может не только проверять правильность (X)HTML, CSS и JavaScript, но также динамически отображать рамки и положения элементов на странице. очень хорош для отладки веб-страниц.
2. Есть ли подходящий DTD?
В других главах этой книги важность DOCTYPE неоднократно подчеркивалась. Различия в DOCTYPE напрямую влияют на интерпретацию браузером (X)HTML и CSS.
3. Поддерживает ли браузер атрибуты CSS. Хотя современные браузеры поддерживают большинство спецификаций CSS 2.1 и некоторые спецификации CSS 3, как описано в предыдущей главе, некоторые атрибуты CSS не поддерживаются браузерами широко, поэтому в разделе «Когда определенный атрибут поддерживает» не вступит в силу, пожалуйста, подтвердите, поддерживает ли это браузер.
4. Изолируйте проблему, чтобы выделить проблемную область, например, добавив к элементу яркую рамку или цвет фона.
Если добавление границы решает проблему, то это проблема перекрытия полей.
Если фон добавлен, но фон не отображается, возможно, это связано с особенностями или плавающий элемент не закрыт.
Попробуйте изменить некоторые атрибуты, особенно атрибуты, которые запускают hasLayout в IE, чтобы определить, является ли это распространенной ошибкой в IE.
5. Настройте базовый тест. Если это не решит проблему, вы можете скопировать проблемный файл и удалить лишний (X)HTML, оставив только проблемную часть.
Удалите проблему с комментариями в (X)HTML и посмотрите, исчезнет ли проблема.
Удалите пробелы между элементами и посмотрите, исчезнет ли проблема.
Затем закомментируйте таблицу стилей блоками, пока проблема не исчезнет, тогда проблема заключается в только что закомментированном стиле.
6. Решить проблему, а не устранить явление. Конечная цель — найти первопричину проблемы и решить ее, а не использовать сложный хак, чтобы веб-страница «выглядела красиво» только для обеспечения производительности. Если вы не решите проблему в корне, вы можете столкнуться с новыми проблемами при обновлении браузера. В то же время взлом может привести к возникновению новых проблем, особенно к срабатыванию или предотвращению срабатывания атрибута hasLayout в IE.
Другой способ мышления также может помочь избежать этой проблемы, например, отменить атрибут поля элемента и вместо этого установить атрибут заполнения его родительского элемента.
Используйте Hack только тогда, когда проблему действительно невозможно решить.