Кроссбраузерность

[psics]

Здравствуйте.

При верстке возникает вопрос кроссбраузерности (особенно вопрос возникает по всем любимому IE). Подскажите типичные моменты, где следует обратить внимание, чтобы потом не переделывать весь макет для IE отдельно.

Знаю точно, что старые IE не работают с прозрачностью файлов. Ну и т.д. Если будут ссылки на варианты решения вообще отлично.

А также вопрос, каким образом верстать, чтобы при изменении масштаба не плавали блоки?

Edited May 3, 2014 by psics

[Ironimus]

Я, например, всегда вставляю в хеад такой код:

<!--[if lt IE 10]>  <meta http-equiv="refresh" content="0;url=http://www.mozilla.org/ru/firefox/new/">  <style>    *{      display:none !important;    }  </style><![endif]-->

[psics]

подло)) по отношению к извращенцам, которые любят ie

[Николя223]

такой код:

Радикально...

Знаю точно, что старые IE не работают с прозрачностью файлов

Всмысле ? opacity???   для них есть фильтр:

filter: alpha(opacity=XX) 

Трансформацию, тоже фильтрами можно заменить

Если вы имеете ввиду прозрачность PNG - то также прогуглите...

Но на данный момент - всё это морально и технически устарело. Я не заморачиваюсь уже. Главное чтобы в IE 8 не разваливалось, а остальное - не важно. Уже смело этого крокодила вычеркнул из списка доверия

[Zverushka]

Лучше подумать об отличиях всех браузеров от файрфокса, например прикола с позиционированием в табличках, толщиной букв в шрифтах типа Arial Black итп. Если что-то наверстал, лучше тут же глянуть, не развалилось ли это там, пока начинаешь еще набираться опыта.

Edited May 3, 2014 by Zverushka

[SelenIT]

прикола с позиционированием в табличках

Пофикшено в транке, ждем-с 31-ю версию без бага

 

толщиной букв в шрифтах типа Arial Black

Настоящего Black или импровизированного из подручных средств?

[Zverushka]

@SelenIT, я вот об этом - http://jsfiddle.net/Vn5kW/ смотреть в файрфоксе и... любом другом браузере, то есть он не понимает существования такого шрифта как Arial Black - он думает, что есть Arial, а black - это жирнота и чтобы его включить нужно установить font-weight. Лично я его поведение именно так трактую.
Если винда стоит с установленным шрифтом конечн.

 

 

 

Пофикшено в транке, ждем-с 31-ю версию без бага

 

 

огооо, клево. А говорили, что не баг, а фича это и типа так даже правильнее =)... еще ток года 2 ждать после выхода новой версии, прежде чем можно будет без зазрения совести пользоваться позиционированием ...

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

 

П.С. - Я что, чей-то любимый браузер обидела?  

Edited May 4, 2014 by Zverushka

[psics]

сегодня ради интереса зашел на mycounter.ua там открыта статистика у некоторых сайтов. В общем в среднем на ie сидят 3-5% пользователей(смотрел в разделах топовые сайты с открытой статистикой). Но как ни странно у  одного было 25%. Я ОФИГЕЛ))))

[SelenIT]

вот об этом

Занятная вещь! У меня в чуть модифицированном примере вот так (слева направо — Fx29, Яндекс-нечто 14, IE9, всё на Win 7 Pro/x64). В описании бага (2011 г.) тоже есть аттач, что не у всех воспроизводится. Чуть позже проверю на старом ноуте, есть подозрение, что зависит от видеокарты. Но выделился из массы (подставив Black-вариант вместо «просто очень жирного Arial-а») у меня только IE9

 

не баг, а фича это

Там спека написана так, что черт ногу об голову сломит. С одной стороны, «действие relative на табличные элементы не определено» (что многие трактовали как «непредсказуемо»), но с другой — содержащим блоком для абсолютов является предок с relative, без каких-либо исключений для табличных элементов. Имхо, второе главнее (и разработчики согласились)

 

Я что, чей-то любимый браузер обидела?

Ну у меня есть какая-то сентиментальная нежность к фоксу со времен бёрда 0.6 . Под ним обычно и разрабатываю, так что для меня «выделывается» чаще Хром . Но минусовать за вкусы действительно как-то не комильфо, минус компенсировал

[Zverushka]

Занятная вещь! У меня в чуть модифицированном примере вот так (слева направо — Fx29, Яндекс-нечто 14, IE9, всё на Win 7 Pro/x64). В описании бага (2011 г.) тоже есть аттач, что не у всех воспроизводится. Чуть позже проверю на старом ноуте, есть подозрение, что зависит от видеокарты. Но выделился из массы (подставив Black-вариант вместо «просто очень жирного Arial-а») у меня только IE9

 

Когда я узнала у меня была ATI radeon 7770, а сейчас у меня geforce gtx 660. И ничего не изменилось). Ток транзиции менее плавными в хроме стали  Такой же прикол есть с font-style у файрфокса, когда наклонный стиль можно сделать только дополнительно выставив италик, только я в упор не помню с каким шрифтом - но точно, с предустановленным на винде). 

А вот, вру, не фонт-стиль, а конденсед.

Вот примерчик   http://jsfiddle.net/Vn5kW/6/

[SelenIT]

Хм, на древнем ноуте с Intel GMA950 (которая вообще никаких эффектов не тянет) и Win 7/x86 у меня всё без изменений, бага не наблюдается Может, в 29-й версии тихо пофиксили?

 

Про condensed упоминается в том же баге и тоже, видимо, у кого-то работает, у кого-то нет. Вариант с Narrow на машине с отн. норм. видео и x64 проверить не смог по причине отсутствия такового , на древнем ноуте отрисовалось одинаково, а на обычный Arial font-stretch: condensed почему-то не влияет (хотя по плану вроде как должен). Кстати, спасибо за наводку, я впервые узнал об этом свойстве

[Zverushka]

@SelenIT,там точно arial black есть на этом ноуте? Сделай скриншот с condesed на нем в файрфоксе? 

[SelenIT]

На ноуте точно есть и Black, и 3 вида Condensed (обычный/болд/италик). Вот такой пример выглядит вот так. Опять же, «переподстановка» через font-stretch сработала только в IE9. Что вижу, то документирую...

[Zverushka]

Кстати у win7 и win8 потрясающие различия в одних и тех же браузерах. К примеру, transition all в 7й винде может полностью скрывать весь блок, а потом показывать, при том, что меняется только цвет у блоков (звучит абсурдно, да?).

Обновила файрфокс до 29 версии, была 28 - фз почему он сам не обновился-то? Баг на месте.

Кстати у тебя шрифты системные вот так выглядят? http://joxi.ru/7mpmU_3JTJDgaKonVWs

[McLotos]

Да зачем вообще заморачиваться? Через пару-тройку лет все будут хромоподобны, вот опера уже переползла на Webkit и стало как-то немного попроще.