Я считаю, что все относительно знакомы с обработкой распространенных ошибок CSS, таких как: IE6 Three Pixel Gap, IE5/6 Double Float-Margin Bug и т. д. Но мы часто сталкиваемся со сложными проблемами CSS BUG. Так называемый «сложный» по сути означает, что условия срабатывания очень сложны, а «ОШИБКА» не обязательно означает, что это ОШИБКА браузера. В случае такого рода проблем первое, что нам нужно решить, — это определить местонахождение проблемы. Только быстро обнаружив проблему, мы сможем решить ее лучше.
Что касается быстрого позиционирования, мой личный опыт обычно таков (он позволяет обнаружить более 90% сложных проблем CSS BUG, с которыми я столкнулся на Taobao):
1. Проверьте,
закрыта ли метка страницы.
это может вызвать у вас проблемы. Проблема CSS BUG, которую не решают каждый день, но она вытекает только из этого. В конце концов, шаблоны страниц обычно вложены разработчиками, и они легко могут создать такие проблемы.
Совет: вы можете использовать Dreamweaver, чтобы открыть файл для проверки. Как правило, если закрытых тегов нет, они будут выделены желтым фоном.
2. Метод исключения стилей:
некоторые сложные страницы могут загружать N CSS-файлов внешних ссылок, затем удалять CSS-файлы один за другим, находить конкретные CSS-файлы, вызванные ОШИБКОЙ, и сужать область блокировки.
Для только что заблокированного проблемного файла стиля CSS удалите определенные определения стиля построчно, найдите конкретное определение стиля триггера и даже определенные атрибуты стиля триггера.
3. Метод подтверждения модуля.
Иногда мы также можем начать с HTML-элементов страницы. Удалите различные модули HTML на странице и найдите модуль HTML, который вызывает проблему.
4. Проверьте, очищены ли числа с плавающей запятой.
На самом деле, существует множество проблем CSS BUG, вызванных не очисткой чисел с плавающей запятой. Необходимо выработать хорошую привычку очистки поплавков. Рекомендуется использовать метод очистки поплавков без дополнительных HTML-тегов (старайтесь избегать использования подобных методов, таких как overflow:hidden;zoom:1, для очистки поплавков, которые будут слишком ограничительными). ).
5. Проверьте, срабатывает ли haslayout в IE.
Многие сложные ошибки CSS в IE тесно связаны с уникальным haslayout IE. Знание и понимание haslayout позволит получить вдвое больший результат при вдвое меньших усилиях по устранению сложных ошибок CSS. Рекомендуется прочитать «О наличии макета», переведенного old9 (если вы не можете пересечь великий GFW, вы можете прочитать репост на синем фоне).
Совет: если haslayout срабатывает, свойства в инструменте отладки IE Панель инструментов разработчика IE будет отображаться значение haslayout - -1.
6. Метод отладки границ и фона,
как следует из названия, заключается в установке заметной границы или фона (обычно черного или красного цвета) для элемента для отладки. Этот метод является одним из наиболее часто используемых методов отладки ошибок CSS, и он по-прежнему применим к сложным ошибкам. Доступно и экологично^^
Последнее, что я хочу подчеркнуть для всех, это то, что развитие хороших навыков написания, сокращение количества дополнительных тегов, попытка быть семантическим и соблюдать стандарты могут фактически избавить нас от множества дополнительных сложных ошибок CSS. , это Мы создаем себе проблемы. Я надеюсь, что все будут держаться подальше от ошибок и жить все лучше и лучше.