IE, Quirks mode и ошибки при отображении полей ввода в зависимости от того, вводятся латинские или кириллические символы

    Добрый день всем

    Старичок IE не перестает нас удивлять и подкидывать все новые проблемы, в самых неожиданных местах.

    При работе над проектом столкнулся с неожиданным поведением полей ввода input и textarea при работе IE в режиме quirks mode. И все бы ничего, в общем-то — кого сегодня удивишь странностями и багами IE. Интересное заключается в том, при каких условиях проявляется проблема. В этот раз это происходит в зависимости от того, какие символы вводятся в поле ввода — кириллические или латинские. Кириллица вызывает проявляение проблемы, латинница вводится нормально и проблема не проявляется. Это показалось мне достаточно интересным и я решил поделиться наблюдением собщественностью.



    Итак, есть html-документ следующего содержания.

    <font size="2" face="Courier New" color="black"><ol><li><font class="rem"><!-- force IE6/7 into quirks mode --></font></li><li><font color="#0000ff"><!</font><font color="#800000">DOCTYPE</font> <font color="#ff0000">HTML</font> <font color="#ff0000">PUBLIC</font> <font color="#0000ff">"-//W3C//DTD HTML 4.01//EN"</font> <font color="#0000ff">"http://www.w3.org/TR/html4/strict.dtd"</font><font color="#0000ff">></font></li><li><font color="#0000ff"><</font><font color="#800000">html</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">head</font><font color="#0000ff">></font></li><li><font color="#0000ff"><</font><font color="#800000">meta</font> <font color="#ff0000">http-equiv</font><font color="#0000ff">="Content-Type"</font> <font color="#ff0000">content</font><font color="#0000ff">="text/html; charset=windows-1251"</font> <font color="#0000ff">/></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">style</font> <font color="#ff0000">type</font><font color="#0000ff">="text/css"</font><font color="#0000ff">></font></li><li>* { margin: 0; padding: 0; font-family: sans-serif; }</li><li>.wrapper { height: 30px; width: 300px; padding-right: 100px; background: #9ac; }</li><li>  .wrapper input, .wrapper textarea { width: 100%; background: #e0e0e0; }</li><li>  .wrapper textarea { overflow: auto; display: inline; }</li><li><font color="#0000ff"></</font><font color="#800000">style</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"></</font><font color="#800000">head</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">body</font><font color="#0000ff">></font></li><li> </li><li> </li><li> </li><li><font color="#0000ff"><</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="wrapper"</font><font color="#0000ff">><</font><font color="#800000">input</font> <font color="#ff0000">type</font><font color="#0000ff">="text"</font> <font color="#0000ff">/></</font><font color="#800000">div</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="wrapper"</font><font color="#0000ff">><</font><font color="#800000">textarea</font><font color="#0000ff">></</font><font color="#800000">textarea</font><font color="#0000ff">></</font><font color="#800000">div</font><font color="#0000ff">></font></li><li> </li><li> </li><li> </li><li><font color="#0000ff"></</font><font color="#800000">body</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"></</font><font color="#800000">html</font><font color="#0000ff">></font></li></font></ol><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font>


    Режим quirks для отображения в IE6/7 выбран осознанно, это необходимое начальное условие.

    На словах: есть блок некоторой заданной ширины (в % или px), которому задан дополнительно отступ справа. Внутри этого блока содержится поле ввода input или textarea.

    Известно, что в режиме quirks, IE любит считать ширину, включая в нее padding. Кроме того известно, что в этом режиме размеры inline-элементов реагируют на свойства ширины и высоты. Т.е. для input и textarea можно указать ширину, что и сделано: ширина задана в % родительского блока. Для наглядности пусть будет 100%. В соответствии с этим, ширина вложенных input и textarea, пока они не заполнены, составляет ширину родительского контейнера минус его отступ справа.

    Fun starts, когда пытаемся что-то ввести в поля. При введении в input кириллических символов внешний отступ содержащего поле контейнера исчезает и поле «разъезжается» на всю ширину. Если вводить латинские символы — проблема не проявляется. C textarea проблема проявляется независимо от того, кириллические символы вводятся или латинские. Такое поведение наблюдается на IE6/7 под WinXP SP2.

    Вот изображение того, что происходит:


    Как избавиться от этого «разъезжания» input и textarea и с чем может быть связана такая «аллергия» именно на кириллические символы для меня остается загадкой. Если кто-то подскажет способ решения проблемы буду очень благодарен.

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 38

      +3
      имхо не использовать quirks mode
      в этом режиме этот код совсем по другому отображается чем в нормальных браузерах
        0
        только лишних проблем себе доставите используя этот режим. с доктайпом можно верстать без всяких проблем, зная «особенности» ие, и методы их решения. а в quirks mode будет отображаться как в ие5. оно вам надо ??
          0
          С радостью бы отказался, но это необходимое условие. Основной макет достаточно сложный и добиться всей нужной функциональности и «укрощения» ie удалось именно в quirks mode для него. Остальные браузеры работают в strict-e
            +1
            лично для меня намного проще было бы верстать с доктайпом. и чем сложней макет, тем нужнее доктайп. ну это только для меня. вы может лучше научились укрощать ие quirks mode… всякое бывает )
              0
              Тот макет, с которым я работаю, с доктайпом без проблем верстать можно было бы, если бы ie понимал некоторые современные css-свойства вроде border-box.
              Сами понимаете, от специфики конкретной ситуации сильно зависит. В моей конкретно ситуации невозможность использования border-box ведет ко значительному увеличению количества лишних структурных элементов, появлению моря оформительских div-ов
              0
              Каким бы сложным не был макет, всегда можно добиться нужного результата в ИЕ6/7 (и в вёрстке, и в JS-функционале) в strict-е. Утверждаю это как веб-разработчик с 3ёх-летним стажем.
              Так что ваша единственная проблема — quirks mode.
                –2
                Мой стаж существенно больше вашего, и тем не менее могу сказать, что это далеко не всегда так категорично, как вы утверждаете. При тех ограничениях, которые я себе ставлю (безтабличная верстка, без применения js, масштабируемый размер шрифта, разные разрешения экрана, одинаковость отображения в браузерах). При упрощениях, конечно, да.
                Речь идет не об обычном макете сайта, а сложном интерфейсе декстопного приложения, который сделан на html+css. Помимо сложности структуры есть еще ряд требований по отделяемости, независимости и переносимости кусков, из взаимосвязи и т.д.

                  0
                  абсолютно поддерживаю
                    0
                    Еще

                    Я прекрасно понимаю, что quirks — это плохо.
                    Но еще хуже слепо следовать правилам или догмам вроде «верстайте все и всегда в strict и будет счастье». Для меня главное — это решить поставленную задачу наиболее эффективным способом. Немного нижу я написал, почему именно quirks для ie — в противном случае общая задача, которая стоит передо мной, решается не эффективно.
                    Ваш трехлетний опыт, видимо, пока еще не дал возможности осознать, что html и css — это не только верстка макетов страничек для интернета, где всегда просто взять и изменить. У нас вот, например, на этих технологиях строится интерфейс настольного приложения — сложного комплекного продукта, где все завязано одно на другое. И из-за мелкой проблемы нельзя вносить столь радикальные изменения, как переключение режима рендеринга.

                    С дикарями надо разговаривать на их языке — другой они не поймут. С глючным ie6 приходится работать соответственно

                    Возвращаясь к сути топика — вопрос был не про выбор режима рендеринга, а про специфический баг в выбранном режиме и можно ли с этим что-то сделать.
                      0
                      «У нас вот, например, на этих технологиях строится интерфейс настольного приложения — сложного комплекного продукта, где все завязано одно на другое.»

                      В разработке настолько сложных систем поучавствовать не довелось (в основном занимался веб-сайтами различной сложности), поэтому возможно вы и правы насчёт использования quirks mode.

                      Что же касается конкретно вашего случая, то могу порекомендовать для ИЕ (через хаки или условные комментарии) прописать для .wrapper input в стилях height: 1%. Вроде бы с инпутом проблема решается. На счёт текстарии никаких мыслей пока нет.
                        0
                        Спасибо за совет по существу. К сожалению, нет, не помогло.

                        Чтобы баг воспроизводился необходимо, чтобы кодировка html файла соответствовала тому, что указано у него в head. Я тестировал в utf-8 и windows-1251 — одинаково.
                        +1
                        Да, и ещё проблема решается, если вместо «padding-right: 30px;» у блока ".wrapper" использовать «margin-right: 30px» у текстарии и инпута.
                          0
                          Обходной путь, ведущий к сильному раздвоению css-стилей: для всех браузеров и для ie… Хотя это всяко лучше, чем ничего вообще
                          Спасибо за идею
                        • НЛО прилетело и опубликовало эту надпись здесь
                        • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      И самое интересное-то =) У кого-нибудь есть мысли, почему именно кириллица вызывает такую реакцию?
                          0
                          Это решение другой проблемы ie
                            –1
                            Это решает эту проблему.
                              0
                              Точно говорю — нет :) Это немного из другой области
                          0
                          Покажите макет, сохраните его в гиф с 32 цветами и покажите.
                            0
                            Скриншот макетов приведен выше. Я добавил подписи и красные стрелочки, но в остальном это реальные скриншоты
                          • НЛО прилетело и опубликовало эту надпись здесь
                            • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                Да, совет хороший :)
                                Но я же не от хорошей жизни так делаю :)
                                Специфика дизайна такова, что для верстки требуется повсеместное использование конструкций стопроцентной ширины или высоты с отступами. В режиме соответствия стандартам, насколько я знаю, это делается двумя способами:
                                а) через два дива, одному отступы, второму ширину
                                на сложном макете дивов получается столько, что это приводит к тормозам при отрисовке страницы в браузере.
                                И не кошерно это — вводить лишние структурные элементы из-за чисто оформительских требований. И есть еще одна проблема, связанная с этим, но это уже слишком глубоко копать надо
                                б) с использованием css свойства border-box. IE это свойство благополучно не знает, так что поэтому для него и выбран режим quirks, в котором он рассчитывает ширину так же, как нормальные браузеры при использовании border-box
                                Со всеми вытекающими негативными последствиями этого режима. Собственно, одно из странных проявлений я и описал в топике, надеясь, что кто-то сталкивался с подобным и может посоветовать что-то кроме «делайте в strict — и будет вам счастье»
                                • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              конечно, у верстальщиков труд титанический…

                              а если этот блок заверстать таблицей?
                                0
                                Ирония? :)
                                Таблицей нельзя. Не из-за того, что я такой упертый принципиальный осел, начитавшийся, что «div-ы это круто».
                                Первоначально дествительно все было на таблицах, и проблем было значительно меньше, кроме ключевой — тормозило это дело страшно. Вложенность получалась такая, в ie страница загружалась 6-7 секунд. Это на локальной машине, без скриптов. Контент не будет показан, пока не будет загружена вся таблица целиком. Таблица не верхнем уровне иерархии в сложном макете вызывала недопустимую медлительность отрисовки.
                                Поэтому все (без фанатизма) переделывается на divах
                                Этот пример — типичная конструкция, которую в жизни приходится многократно вкладывать друг в друга. Обвешанную дополнительными стилями, во взаимодействии с соседями… Конкретно эту форму можно сделать таблицей, но это не решит общую проблему
                                • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                приятно общаться с адекватным человеком :-)
                                по окончанию, киньте в личку адрес проекта, хочется посмотреть на этого монстра :-)
                                  0
                                  отправил сообщение
                                  0
                                  стрикт надо использовать для того, чтобы не бодаться с глюками, которые уже давным давно пофиксили.
                                    0
                                    strict не заставит ie понимать css-свойства, которых он не знает
                                      +1
                                      зато заставит понимать те, которые знает, правильно
                                        0
                                        Одного этого, к сожалению, недостаточно — выше я описал почему
                                          0
                                          … но не показал макет…
                                            0
                                            вы же не просили
                                    0
                                    например если у инпута задан правый и левый отступ по 2px, бордер 1px то можно написать так
                                    input { margin-left:-6px; width:100% }
                                    .wrapper { padding-left:6px; }
                                    это поможет обойти использование box-sizing и боже упаси quirks mode.

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                    Самое читаемое