5 августа 2009 в 15:50

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

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



Создавая 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?».

Мне хотелось бы узнать мнение хабрасообщества по этому вопросу, а также ваши примеры, если вы сталкивались с чем-то похожим.
Мохов Олег @Olegbl4
карма
57,7
рейтинг 0,0
Похожие публикации
Самое читаемое Разработка

Комментарии (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
    Может поможет: pepelsbey.net/pro/2008/09/ie-street-magic/
    • +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) вам не помогли, тупо пишите хак для конкретного браузера.
    • 0
      Забить нельзя.
  • +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 в режим совместимости.

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