Новые проблемы верстальщиков

    На фоне мечтаний об исчезновении с десктопов одного известного всем браузера хотел бы рассказать вам о проблеме, с которой недавно столкнулся и которую пока не знаю как решить.



    Создавая Internet Explorer 8 в Майкрософт решили, как всегда, прыгнуть выше других и вместили в нём аж целых два браузера. Если вы до сих пор не знали о такой возможности, то просто нажмите F12 и увидите о чём я говорю. Итак, в одном флаконе мы имеем IE7 и IE8. Интересный расклад? Ещё более интересным он становится тогда, когда выясняется, что IE8 в режиме IE7 не является точной копией Internet Explorer 7.

    Возьмём, к примеру, такой код:
    <div style="border: 1px solid red;">
    <input type="text" style="vertical-align: top;" />
    </div>
    

    Вот как это выглядит в IE7 и IE8 в режиме IE7.
    image

    или чуть ближе:
    image
    Итак, что же мы имеем. А имеем мы разную ширину input'ов (что, конечно, поправимо её явным заданием) и непонятные отсупы сверху и снизу от input'а, что очень критично при попиксельной вёрстке, которая была нужна мне. Самое главное, что мы имеем, это то, что есть факты разного отображения одинаковой вёрстки в IE7 и в IE8 в режиме IE7. Получается, что если незадачливый юзер, случайно переключит режим (как произошло с моим заказчиком), то он вполне может начать негодовать… И так может сделать любой (!) пользователь.

    Пока я не знаю хаков, которые бы работали в одном из браузеров и не работали в другом (IE8 в режиме IE7 понимает хаки для IE7), а с ростом количества пользователей IE8, особенно среди заказчиков сайтов, будет расти количество похожих проблем и вопросов: «Нажмите F12, что у вас там написано?», «Вы смотрите в IE7 или в IE8 в режиме IE7?».

    Мне хотелось бы узнать мнение хабрасообщества по этому вопросу, а также ваши примеры, если вы сталкивались с чем-то похожим.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 140
    • +4
      НУ почему же с IE всегда столько гемороя?????? Когда уже изготовители браузеров объединятся и примут какие унифицированные параметры
      • +74
        отправьте СМС с кодом IE8-9 на номер 4554, и получите ссылку на нормальный броузер…
        • +1
          Очень сомневаюсь что они когда-то объединятся. Сейчас многие выбирают браузер не только по функциональности, а и на сколько хорошо он обрабатывает код. IE6 того и уходит вниз из-за своей корявости отображения.

          Если же они всё же объединятся для принятия «унифицированных параметров», то отображение кода у всех будет одинаковое, а различия в браузерах будут только в функционале, который они сейчас и так друг у друга передирают. Какая ж это бешенная конкуренция будет :)
          • +2
            конкуренция это залог качества
            • 0
              Что-то вы сильно путаете прошлое с настоящим, как раз таки сейчас браузер выбирается руководствуясь, в основном, функциональностью. Отображение html и скорость рендеринга на нормальных каналах примерно одинаковая у всех основных игроков.

              А ИЕ6 уходит со сцены только потому, что этот браузер уже ооочень старый и разработчик его более не поддерживает. Но заметьте, несмотря на это его доля всё равно велика, а это значит, что отображает страницы он на вполне приемлемом для среднего пользователя уровне.
            • +4
              w3c этим и занимается… но по большому счёту… ложил микрософт на w3c из за этого и гемор.
              • 0
                Никогда!
              • 0
                Они вместили 3 браузера :)
                Ие7, ие8 в режиме совместимости и режим ие8.

                Ставьте мета-тэг чтобы сайт отображался или в режиме ие8 или в режиме ие7, чтобы не было никаких полумер.

                • +1
                  у меня стоит <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8” /> (другой поставить не могу, потому что это требование заказчика), также я ставил IE=8, IE=7 возможность нажать F12 и выбрать остаётся.
                  • +1
                    докажите заказчику что IE=EmulateIE8 это зло и надо или ие8 или ие7.
                    Я думаю, он просто не до конца понимает что это за режим такой полусовместимости…
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • 0
                        Quirks-доктайп — дурная идея, несущая кучу потенциальных проблем имхо, лучше пользоваться стриктом.
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • 0
                            Очевидно авторам Яндекса во времена его создания Quirks mode использоывть было проще, но сегодня я не вижу в этом никакой выгоды, проще делать все по стандартам, нормальных браузеров все больше становится. яндекс до сих пор использует таблицы в верстке так что не уверен что с них стоит брать пример.

                            Понятно, что если стоит условие использовать Quirks — ничего не поделаешь, тут могу только посочувствовать.
                    • +1
                      кстати нарыл интересную статью — blogs.msdn.com/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx

                      Проверяйте доктайп.

                      Сказано что без доктайпа в режиме EmulateIE8 все рисуется в QuirksMode, с нормальным доктайпам — все в соответствии css 2.1 будет.
                    • +29
                      возможность нажать F12 и выбрать остаётся.

                      а еще остается возможность написать свой браузер, который отображает страницу вверх ногами с переливающимися кислотными цветами и морганием, вызывающим эпилепсию. если на том, чтобы «было пиксель в пиксель, даже если пользователь зайдя на страницу изменит режим просмотра через F12» настаивает заказчик, скажите ему, что он ебанутый и пусть передает привет бригадиру.
                      • +2
                        или устроить диверсию: внедриться в команду разработчиков IE и сделать из него нормальный браузер.
                        • +5
                          знаю, что сейчас будет, но все же: IE8 — нормальный браузер.
                          • 0
                            Ага, или из вас сделают «нормального разработчика» :)
                          • –1
                            Какие смешные эти вендофилы… Из-за косяков браузера пытаются заствить ходить строем и пользователей и заказчиков лишь бы не признавать косячности их фетиша… А если заказчик нажимает _предусмотреную_ изготовителем кнопку — то он уже и сумасшедщий и дебил и всё в одном флаконе. Запретить и выломать Ф12 — ага? А может быть всё-таки что-то в консерватории?..
                            • НЛО прилетело и опубликовало эту надпись здесь
                              • 0
                                А эти «доплнительные пиксели» предусмотрены и задокументированы производителем? В хелпе это есть?
                                • НЛО прилетело и опубликовало эту надпись здесь
                          • НЛО прилетело и опубликовало эту надпись здесь
                            • 0
                              другой поставить не могу, потому что это требование заказчика

                              А чем «требование» аргументированно, если не секрет?

                              Это как-то влияет на работу сайта (естественно не в смысле отображения :)), а в идексировании поисковиками или там доступность для пользователей)?

                              Просто требование какое-то странное, imho. Если заказчик такой «знаток» нафига ему технолог наёмный.
                            • +2
                              Вообще-то четыре: IE 5.5 quirks mode, IE 7 standards mode, IE 8 almost standards mode и IE 8 standards mode.
                              • +1
                                Из новостей, сегодня 13 марта 2010 года, корпорация майкрософт выпустила очередную версию легендарного броузера Internet Explorer 10.0. В юбилейной версии в частности есть, режим совместимости всех ИЕ начиная с 5.5, а так же: работа в режиме, ФФ, оперы и хрома…

                                :)
                              • +3
                                • +1
                                  Вот, как раз должно помочь человеку :)
                                  • 0
                                    Я описывал ситуацию, при которой IE8 в режиме IE7 (заданном принудительно) отображает страницу отлично от IE7.
                                    • +1
                                      А вы рассчитовали на 100% совпадение?

                                      Спешу вас разачаровать — 100% совпадение невозможно просто потому, что это, судя по всему, разные контролы. Верстка будет совпадать, но чтобы совпадало все до пикселя — это нет.

                                      Режим IE7 — это не то же самое, что код IE7, встроенный в IE8.
                                      • +1
                                        Назвался IE7 будь им.
                                        • +3
                                          Это не IE7, а режим IE7. Все-таки разные вещи.
                                          • +1
                                            Тогда почему бы ему не иметь другую версию для отработки хаков?
                                      • 0
                                        Речь не о теге X-UA-Compatible. А о режиме рендеринга Internet Explorer (Quirks Mode, Standard Mode, Super Standard Mode)
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                          • 0
                                            > «Super Standard Mode» не существует :)

                                            С точки зрения всех браузеров — не существует, но мы же тут говорим про IE. Поэтому я уверен, что с выходом IE9 появится «Super Super Standards Mode»…
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                              • 0
                                                Ну, не стоит забывать историческую основу этих терминов, иначе возникнет путаница.

                                                Когда в IE 5 для Mac появился режим переключения DOCTYPE, старый стал называться Quirks Mode (режим трюков), а новый Standard Compliance Mode (режим совместимости со стандартами, причём «совместимость» в смысле «соответствие»).

                                                Поэтому то, что появилось в IE8 — это всё-таки надолго, движок они уже менять не будут. И название «Super Standards Compliance Mode» вполне логично продолжает уже существующую терминологию.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • +8
                                    Я знал, ну было у меня такое чувство, что надо не только от шестого избавляться, надо вообще от всего семейства. А ведь они там еще что-то «совершенно новое» разрабатывают. И от него надо будет избавляться.
                                  • +13
                                    Вроде как проблемы то и нет особо.
                                    А дело в разной отрисовке контролов в разныъ браузерах (а в данном случае еще и запущенных на разных ОС — на скрине явно видно, что семерка под XP, а 8ка под вистой).
                                    При такой верстке, у вас контролы будут отличается не только в разных версиях IE, но и в других браузерах и операционных системах будут выглядеть несколько иначе.
                                    Лично я не вижу никакой проблемы в этом.
                                    Если Вам нужна верскта пиксель-в-пиксель, то задайте явно размеры, границу и отступы котнролу.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                    • +1
                                      Поясните мне пожалуйста, зачем может быть полезна попиксельная верстка? Кроме случаев «синдрома вахтера» у дизайнера/заказчика?
                                      • +1
                                        У меня в вёрстке поверх input'а лежит картинка, отпозиционированная точно по середине. В IE8 в режим IE7 она находится на пискель ниже нужного. Заказчик недоволен.
                                        • +1
                                          Я хотел узнать не про конкретный случай, а вообще. Тут с контроламы как бы ясно, а вот в общем случае, когда стоит задача сверстать «попиксельно», зачем это может быть нужно? Зачастую это достигается увеличением кода, уходом от семантики да и вообще усложнение всего и вся. Зато попиксельно. Мне это как бы раздражает, я не могу понять, зачем это нужно. Отаке.
                                          • 0
                                            Ну, я имел ввиду что в том блоке что я верстал требовалась попиксельная точность.
                                            • 0
                                              Да к вашей верстке нет никаких претензий. Я задал метафизический вопрос. Ведь вы могли встречать такое требование? Зачам оно людям надо? Вопрос не только вам, вопрос всем. Я хотел узнать мнение людей по этому моменту.
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                • +1
                                                  Работал когда-то над сайтами BOSCH. У них целый мануал, в котором на скриншотах всё попиксельно. Все рамки, отступы, шрифты. Каждый год проводится аттестация всех сайтов на соответствие этому мануалу. Как ни крути, а приходилось следовать. Вот такая вот паранойя.
                                                  • 0
                                                    Называется Брендбук
                                                    • 0
                                                      Может. Они его называли Style Guide. Пиксель в право, пиксель в лево — расстрел.
                                                  • +2
                                                    Ну когда я столкнулся с таким заказчиком (там всё и вся нужно было попиксельно. реально с линейкой у монитора сидел :)), то он объяснял это туманной фразой «я так вижу гармонию». после 2 месяцев издевательств заказчик был тихо слит.
                                                    • +1
                                                      А че сразу слит, может с него можно было просто больше денег взять чем с других?
                                                      • +1
                                                        Нет, это было исключено.
                                                    • 0
                                                      Да, странный вопрос конечно. Вероятно весь сайт делать попиксельно и не надо, но точно есть элементы, почти в любом дизайн-макете где это требуется. Есть, например, такое понятие как сетка и зачастую выпадение на 1 пиксель может сильно бросаться в глаза. Есть вообще макеты в которых дофига графики, там, чтобы она нормально стыковалась это тоже критично. Да и вообще, часто 1 пиксель меняет многое. За примером далеко ходить не надо: habrahabr.ru/blogs/design/57552/
                                                  • +5
                                                    есть подозрение, что этот бред родился в головах сошедших с небес Дизайнеров с эго планетарного масштаба. «этот Дизайн был Дан мне с Выше, так что не испогань его своими грязными ручонками, смертный».

                                                    ничего более рационального в голову не приходит.
                                                    • +1
                                                      Ну я просто хотел удостовериться, что я с подобным мнением не одинок.
                                                      Меня особенно забавляет, когда говоря, что здесь должно быть не 65px, а 63px — это же пипец. Я люблю «круглые» значения, а 63 — у меня складывается мнение, что дизайнер при рисовании макета не придерживался никакой системы и ляпал все из далека.

                                                      Итого я выробатотал для себя 2 мысли:
                                                      1 — дизайн «проверять» должен не дизайнер, может быть менеджер или заказчик, но не имея при себе оригинала дизайна в масштабе 1:1. Если он смотрит и все гармонично и как было задуманно — хорошо, принимаем.

                                                      2 — это уже так, больше прикол, но не лишенный доли правды: для того что бы к вам не приставали с темами «тут на пиксель поправить...» — надо верстать в em.
                                                      • 0
                                                        не 65px, а 63px — это же пипец. Я люблю «круглые» значения
                                                        я тоже люблю круглые значения, но мне (как программисту, в первую очередь), больше импонирует 64 :)
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                        • 0
                                                          да потому что на бумаге рисовать дизайны надо. шутка)
                                                          в иллюстраторе мои макеты никогда дальше эскизов не заходят, после утверждения дизайна сразу начинается верстка и подготовка графических элементов для нарезки. заказчику абсолютно до барабана величины с точностью до одного пикселя. зато он может в любой момент сказать — «давайте сделаем этот столбец чуть шире». если заказчик — не Бош, конечно)
                                                          • 0
                                                            да их тоже можно понять. Тут на 3 пиксела вправо, там на 4 влево… Потом — бац — и на страничке вроде все и отображается, но как-то… некрасиво.
                                                      • +2
                                                        ну, например, когда нужно выровнять один элемент относительно другого. у близко расположенных блоков смещение относительно друг друга в 1px бросается в глаза, даже человеку далекому от дизайна и рисования, а при работе с мелкими элементами это еще заметнее: всякие там стикеры, иконки, плашки и т.д.
                                                        Если говорить о технической стороне, то за счет пиксельных манипуляций гугл делает свои знаменитые закругленные уголки без использования картинок. Да и при использовании картинок для скругленных уголков тоже часто приходиться вглядываться в каждый пиксель, особенно при работе с тенями и градиентами.
                                                        Ну а при оптимизации графики пиксель вообще становится единицей смысла. Одни спрайты чего стоят, подгонять их попиксельно в фаербаге — одно удовольствие! +)
                                                        Да и много еще где при верстке с пикселями приходится иметь дело: типографика, бордеры, анимация… Главное чтобы эта «ювелирная» работа действительно решала важные задачи, а не просто ублажала безумные прихоти дизайнера/заказчика
                                                        • –1
                                                          Вы тоже говорите о деталях. О мелких элементах, о уголках, понятное дело, что в таких случая расхождение в пиксель заметно. Я же говорю про случай, когда берут картинку (с PDF снятую) и подкладывают ее под сверстанный вариант или открывают ее в другом табе и происходит «сравнение», отклонение в пиксель в каком-то блоке — это баг.
                                                      • –2
                                                        Не сталкивался, пока доволен 8, скорее его дебагером. Хотя подозревал что IE8 в режиме IE7 не вполне IE7. Спасибо за статью. Я думаю проблемы с IE вряд ли закончатся, хоть с какой версией, это видимо просто отражение какого то их тонкого стиля
                                                        • +1
                                                          Стиля играть на нервах ржавым смычком.
                                                        • 0
                                                          Кстати, тем, кто работает с Google Maps API. Обратите внимание на то, что в IE 8 в событие «click» приходят неверные координаты точки клика. В IE 7 и режиме совместимости – всё отлично. В чистом IE 8 координаты не те.
                                                          Не знаю, проблема это броузера или GA API, обнаруживается только в IE 8.
                                                          • +1
                                                            Забыл упомянуть, что в багтрекере гугл мапов сей баг есть, но пока не решен.
                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                            • 0
                                                              инпуты ваще трогать не надо.
                                                              на работе у меня 2008 Server стоит — там инпуты ваще с 3-х пиксельным бордером по умолчанию, а некоторым заказчикам (у которых Vista) хочется чтобы например при наведении менялись бордеры (что в Висте и происходит). Приходится верстать в слепую. (эмулироваить поведение нельзя).
                                                              • 0
                                                                значит, надо ставить винды в эмуляторах
                                                                microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en#filelist
                                                                • 0
                                                                  дык а кнечный юзер то какой? это че — «верстать под Висту» теперь новое понятие будет?
                                                              • +1
                                                                Можно у input убрать фон и рамку, обернуть его в div, а div уже оформлять
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                  • +3
                                                                    Мде. Никакая это вовсе и не проблема, по крайней мере здесь критичного ничего нету.
                                                                    • 0
                                                                      Когда вам в два ночи позвонит менеджер и будет орать, что вы нихрена не умеете, вспомните эти слова.
                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                      • 0
                                                                        По-идее юзер должен запускать режим совместимости только если в нормальном режиме будут неукротимые баги. Соответственно если сайт нормально выглядит в ИЕ8, то все ок.
                                                                        • +2
                                                                          Да, «красиво» микрософт решила проблему с совместимостью.

                                                                          Лучше было сразу сделать переклачатель движков Trident — Gecko — Webkit — Presto, в каком-то да заработает :)
                                                                          О, и еще должна вылезти скрепка с вопросом: «Как вы оцениваете качество отображения страницы?» и предложить сохранить выбор.
                                                                        • +1
                                                                          Могу только посочувствовать.
                                                                          Хорошо, что я не верстальщик!
                                                                          • 0
                                                                            Пора на хабре сделать опрос

                                                                            Когда вы перестанете верстать под ИЕ:
                                                                            — когда доля ИЕ упадет да 25%,
                                                                            — когда МС выпустит ИЕ9, не совместимую с ИЕ8,
                                                                            — уже не верстаю.
                                                                              • +2
                                                                                Да, я пользуюсь этим тегом, но это не отменяет возможности нажать F12.
                                                                                • +2
                                                                                  Переключение режимов по F12 предназначено для разработчика и действует только до перезапуска браузера / закрытия вкладки, поэтому безопасно.

                                                                                  Проблема кнопки справа от адресной строки — в том, что её пользователь может нажать случайно, не понимая её смысла, и настройка при этом запомнится и будет действовать даже после перезапуска браузера. Именно это гарантированно исключается при помощи X-UA-Compatible, иного не требуется.
                                                                                  • 0
                                                                                    И, кстати, это не тег, а элемент.
                                                                                • 0
                                                                                  Страшно представить, что будет когда выйдет IE 9… это же придётся верстать под эмулятор эмулятора IE 7 ))
                                                                                  • 0
                                                                                    Я вообще предлагаю решать проблему просто — перехватывать нажатие F12 в IE8, отменяя стандартную обработку.
                                                                                    Да, я прекрасно понимаю, что такой способ в некоторых случаях абсолютно неприменим, однако… почему нет? =)
                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                      • –2
                                                                                        Бу-ха-ха!!! Я всегда знал, что Майкрософт реабилитируется и вернёт всё на круги своя!!! А то расслабились тут, понимаешь, видите ли браузер накатали вроде как по стандартам, ось вроде нормальную ни с того ни с сего замутили, да ещё обещались самый корень зла исключить из поставок в Европе! Слава Лысине, они одумались :)
                                                                                        • –1
                                                                                          Не оценил народ юмор под градусом. Больше не буду под выпивку Хобр читать и уж тем более комментировать :)
                                                                                        • 0
                                                                                          Только только начали избавляться от одной проблемы под названием «IE6»… скоро требования к вёрстке будут выглядеть подобным образом )))
                                                                                          «Требуеться строгое соответствие вёрстки во всех браузерах FireFox, Safari, Opera, Internet Explorer 7, Internet Explorer 8, Internet Explorer 8 в режиме Internet Explorer 7...»
                                                                                          • +2
                                                                                            Для заказчиков-параноиков будет так: «Требуется строгое соответствие вёрстки во всех браузерах: FireFox 1.х-3.х, Safari Mac/Win, Opera 7-9, Internet Explorer (6, 7, 8, 8 в режиме 7); попискельная вёрстка, альфа-канал, закруглённые уголки, работа c выключенным JS.»
                                                                                            • +2
                                                                                              Ага и приписка: «оплата 500 руб. нужно срочно!!! сделать за ночь!»
                                                                                          • 0
                                                                                            Вот чёрт. Я чуял, что какую-нибудь свинью да подложат.
                                                                                            • 0
                                                                                              Тот же тест в пределах одной операционной системы без виртуальных машин и прочего.

                                                                                              img-fotki.yandex.ru/get/3609/winniehabr.0/0_37957_7886ed0_orig

                                                                                              Разница — в один пиксель по вертикали сверху и снизу, что является вполне решаемым, так как для кроссбраузерной верстки «пиксель-в-пиксель» всё равно пришлось бы убрать границы input и обернуть его в div (один из вариантов).
                                                                                              Например, если открыть в хроме — вертикальные отступы тоже будут.
                                                                                              Я вот не понимаю почему все обижаются на майкрософт в данном случае.

                                                                                              Тестировал я на html 4.01 strict, определив его по краю доктайпа в тексте поста.
                                                                                              • 0
                                                                                                Этот код использовал для теста: web.users.ru/test.html
                                                                                                • 0
                                                                                                  да, перебросить границы — это вариант. Но я хотел показать о самом факте различия, т.е нельзя утверждать, что решив конкретно эту проблему нет других.
                                                                                                  • 0
                                                                                                    Сделал в конце концов именно так… получилась другая мини-проблема (на которую теоретически можно забить, и всё же) в браузерах с подсветкой инпутов при focus'е выделяется область внутри имитированного инпута (Chrome, Safari)
                                                                                                • +1
                                                                                                  у меня непонятная бага была с ajax'ом в IE8. передавались разные куки для обычного и ajax запросов.
                                                                                                  • +2
                                                                                                    1) Не увлекайтесь попиксельной точностью верстки
                                                                                                    2) Забейте на режимы эмуляции, я например верстаю только доктайпом 4.01 Strict, проблем меньше.
                                                                                                    3) Ну если 1) и 2) вам не помогли, тупо пишите хак для конкретного браузера.
                                                                                                  • +1
                                                                                                    да ебись оно конем, извените не выдержал
                                                                                                    • +1
                                                                                                      Я вас понимаю :) Примерно такие эмоции и возникают когда встречаешь своеобразное восприятие инструкций CSS отдельно взятым браузером (не только ИЕ, будем справедливы).
                                                                                                    • –2
                                                                                                      Какой доктайп?
                                                                                                      Ресет.css юзали?
                                                                                                      • 0
                                                                                                        В примере нет, вообще да. Доктайп strict
                                                                                                        • 0
                                                                                                          reset.css от Мейера контролы не трогает.
                                                                                                        • +3
                                                                                                          Накатите на вашу систему другую шкуру для input контрола c рамкой в 10 пикселей, из которых 9 внешних будут бесцветны и посмотрите что получится :))) Совершенно нормальная ситуация, только вот после таких «недалеких» топиков люди далекие от понимания функционирования подобных систем почем зря сново начинают кричать, что «windows — mustdie».
                                                                                                          • +2
                                                                                                            Зря минусуете товарища, все подобные подвохи описаны в MSDN, раздел «Visual Styles» — размеры контролов различны, шкуры различны. Это тоже самое, что пытаться нарисовать полностью одинаковый интерфейс (пиксель в пиксель) в обычных программах. Для того, чтобы получить именно то, что хочется — существует целый набор API для получения всех нужных размеров (регионов и т.д.) контролов, ибо эти данные в системе динамические и зависят от текущей темы.
                                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                            • 0
                                                                                                              IE7 который в IE8 по сути создан для разработчиков. Какой смысл под него подстраиваться?
                                                                                                              • +1
                                                                                                                Пока я не знаю хаков, которые бы работали в одном из браузеров и не работали в другом
                                                                                                                Есть conditional comments.
                                                                                                                • +1
                                                                                                                  А они позволят отделить «настоящий» IE 7 от IE 7 «из IE 8»?
                                                                                                                  • 0
                                                                                                                    Не знаю. Можно же попробовать, правда?
                                                                                                                    • 0
                                                                                                                      Собственно, я как раз имею в виду, что скорее всего не позволят.
                                                                                                                      Я, к примеру, не знаю, как такое условие можно сформулировать.
                                                                                                                      • 0
                                                                                                                        Переключаем IE8 в режим IE7 и пробуем проверить в conditional «не IE ли это 8».
                                                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                          • 0
                                                                                                                            Получается нужно писать СС для IE7, в котором из JS проверять document.documentMode? Чтобы проверить IE7 это или IE8 в режиме IE7? Ну хоть что-то уже…
                                                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                            • 0
                                                                                                                              Может попробовать на стороне сервера? Не шлёт ли IE8 какие-то особенные заголовки?
                                                                                                                  • +1
                                                                                                                    что-то все тут ушли в разглагольствования про попиксельную точность и немного отошли от темы.
                                                                                                                    ие7 в ие8 вовсе не ие7 (в нете есть немного просвятительской инфы), есть свои замашки, хотя процентов на 98%, конечно они повторяют ие7, но всё же.
                                                                                                                    беда же появляется немного в другой крайности, для ие8 в режиме совместимости ие7 нельзя отдельно написать свои стили, только для «нормального» ие7, а от этого там может немного поехать.
                                                                                                                    в таком случае я бы всё же порекомендовал не ставить сайт в режим совместимости с ие7 (для ие8), а особо «мозговитых» заказчиков, которые нашли возможность поменять ие8 на ие7 и кидаются предъявами, всё же как-то просвятить что это «немного» другой ие7.
                                                                                                                    • +1
                                                                                                                      А у меня ваш код выглядит одинаково в IE7 WinXP и IE8 (IE7 mode) WinXP:



                                                                                                                      …может дело в том, что на скринах Vista, а не XP?
                                                                                                                      Мой код:

                                                                                                                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                                                                                                                      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
                                                                                                                      <head>
                                                                                                                      	<title>IE</title>
                                                                                                                      	<meta http-equiv="X-UA-Compatible" content="IE=7"/>
                                                                                                                      	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
                                                                                                                      	<style type="text/css">
                                                                                                                      		BODY {
                                                                                                                      			background:#069;
                                                                                                                      			}
                                                                                                                      	</style>
                                                                                                                      </head>
                                                                                                                      <body>
                                                                                                                      	<div style="border:1px solid red">
                                                                                                                      		<input type="text"/>
                                                                                                                      	</div>
                                                                                                                      </body>
                                                                                                                      </html>
                                                                                                                      • 0
                                                                                                                        vertical-align: top для input'а забыли.
                                                                                                                        • 0
                                                                                                                          Только напишите результат, меня вопрос зависимости браузера от Виндоуса очень волнует (клиент прислал скриншот в Windows 7 вообще)
                                                                                                                          • 0
                                                                                                                            Ок, добавил — разница исключительно в 1px отступах свеху и снизу в настоящем IE7.
                                                                                                                            И это проблема?
                                                                                                                            • 0
                                                                                                                              Да, я об этом и написал
                                                                                                                              • 0
                                                                                                                                В вашем примере ещё и ширина разная, что значительно усиливает негодование.
                                                                                                                                • 0
                                                                                                                                  Ширину можно исправить явным задание. А вот как бороться с оступами сверху и снизу, если заказчик не понимает, что у него IE8 не в режиме IE8?
                                                                                                                                  • 0
                                                                                                                                    Я что-то не понимаю ситуации.

                                                                                                                                    Сайт делаете вы сами, значит вы можете совершенно явно задать режим отображения для IE8 как «самый современный», а именно:

                                                                                                                                    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

                                                                                                                                    …и его уже не сменить, ни специально, ни случайно.
                                                                                                                                    • 0
                                                                                                                                      Не совсем, специально его сменить можно, случайно тоже (правда надо быть шибко любопытным).

                                                                                                                                      Я привёл этот пример для демонстрации, что в браузере IE8 написано Browser Mode: IE7, что следует понимать как отображение так же как в IE7, но это не так! Вчера я нашёл ещё один пример, который показывает одно в IE8 в режиме 7 (и, кстати, в IE Tester) и совсем другое в IE7.

                                                                                                                                      Я не понимаю как заказчик переключил этот режим (если переключал), сейчас жду ответа на письмо с текстом «Вышлите мне скриншот браузера после нажатия F12». Дальше начнём думать, потому что если он ничего не предпринимал и у него режим IE8 нормальный, то значит всё дело в Windows 7, которая стоит у заказчика. Но мне уже не нравится вся эта ситуация.
                                                                                                                          • +1
                                                                                                                            Конечно же, все дело в том, что контролы — они разные в разных системах Windows.

                                                                                                                            Это косяк часто встречается и у обычных программистов. К примеру человек динамически создает несколько edit контролов, и его код выглядит примерно так:

                                                                                                                            int edit_height = 20
                                                                                                                            for (int i = 0; i < 5; i++)
                                                                                                                            CreateNewEdit(pos_x, i * edit_height);

                                                                                                                            в итоге, к примеру в Win98 получаем аккуратные друг к другу расположение Edit'ы. Но уже в XP, где размер не 20 пикселей, а к примеру 22 пикселя — они наезжают друг на друга, в Vista все тоже выглядит иначе. Чтобы подобного не было, edit_height должен задаваться как результат вызова функции которая возвращает в системе высоту Edit контрола.

                                                                                                                            Собственно здесь имеено по этому и получился такой «баг» — контролы просто разные
                                                                                                                          • 0
                                                                                                                            Не показывайте эту статью начинающим верстальщикам — они сразу забросят эту профессию)
                                                                                                                            • +1
                                                                                                                              В последнее время эта тема становится очень горячей.
                                                                                                                              Осталось только пикеты перед офисами Microsoft устроить :-(
                                                                                                                              • 0
                                                                                                                                У инпута в ручную бордеры задать не побывали? ;)
                                                                                                                                • 0
                                                                                                                                  IE6,7 добавлял к элементам форм input[type=text], input[type=submit], select, textarea однопиксельные отступы.

                                                                                                                                  Я больше скажу, я потратил уйму времени на то, чтобы заверстать формы так, чтобы они попиксельно соответствовали в разных браузерах и на разных платформах. Своего я добился в целом, но получилась простыня на несколько экранов, вся в хаках и костылях, теперь вот я сижу, смотрю на это и думаю, стоила ли овчинка выделки. И можно ли такое вообще показывать людям (именно поэтому еще не опубликовал).

                                                                                                                                  Что касается конкретно этого случая, то я в итоге сделал, чтобы везде был этот самый margin. Получилось даже удобно — если поля впритирку стоят — есть зазор.
                                                                                                                                  • 0
                                                                                                                                    я бы с интересом посмотрел как ведут себя эти элементы под разными браузерами и платформами. у самого есть небольшые костыли, выглядит, конечно не утешительно )
                                                                                                                                    • 0
                                                                                                                                      Я могу сделать статью в принципе… если будет время — опубликую.
                                                                                                                                      • 0
                                                                                                                                        как минимум это будет интересно ;)
                                                                                                                                        джём.
                                                                                                                                  • 0
                                                                                                                                    Вывод простой: НЕ НАДО вводить IE8 в режим совместимости.

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