Среди обычных ошибок IE6 в Guillotine и Peek-a-boo почти освежает то, что он по-прежнему способен создавать что-то действительно уникальное и креативное.
Это новая ошибка, которую мы обнаружили сегодня на титульной странице SitePoint. XHTML для тематической статьи не особенно примечателен, насколько мне известно:
— Функция DIV # установлена в процентном соотношении к ширине страницы
— иллюстрация размещена непосредственно перед названием и всплыла справа
— заголовок H1, кредит автора H5 и P blurb все переносятся слева от иллюстрации
Поскольку изображения не могут сами изменять размер, можно ожидать, что текст будет обтекать иллюстрацию при уменьшении размера окна браузера.
И вы были бы правы … до некоторой степени.
Как вы можете видеть, когда слово в ссылке на заголовок заканчивается в IE6, оно переносится на следующую строку, но также оставляет частичную копию себя в исходной строке — злой двойник.
Причудливый — это как будто слово разрывается между тем, как сделать решающий шаг и выставить вещи на известную линию, надеясь, что все станет лучше.
Продолжайте уменьшать окно, и двойник в конечном итоге падает через край и снова исчезает в эфире. Конечно, немного увеличьте масштаб, и он снова появится по команде.
Я исправил это на живом сайте, но вот статическая версия, если вы хотите увидеть это сами.
У меня нет объяснения, почему это происходит — это, безусловно, связано со ссылкой — но я разработал решение, которое, кажется, исправит это, если вы столкнетесь с той же проблемой.
Во-первых, ссылка должна быть переключена со стандартного 'display:inline » на « display:block ».
#feature h1 a { display:block }#feature h1 a { display:block }
Это предотвратит перенос слов в ссылке на «среднее слово», но не остановит эффект двойника — теперь он просто дублирует полное слово. Чтобы изгнать двойника, мы должны добавить к нашему заголовку отступ минимум в 1 пиксель. Добавление границы, установленной к цвету фона, также работает, но с большей вероятностью может вызвать другие проблемы с макетом, например, если пользователь переопределяет цвет фона.
#feature h1 { padding:1px }#feature h1 { padding:1px }
Это, конечно, работает, но налагает на вас дополнительные отступы — может быть лучшее решение.
Я погуглил еще один случай появления этой ошибки и не смог ее найти, поэтому советую, что это ошибка, вызванная очень специфическим набором обстоятельств.
Я все еще думаю, что здесь стоит документировать — это исправить гораздо проще, чем найти в первую очередь.
При дальнейшем исследовании это будет разновидностью ошибки «haslayout», то есть добавление «header: 1» (недопустимый CSS) или «height: 1%» к заголовку исправит ошибку, не изменяя отступы.