Что не так-то?

[Softlink]

Доброй ночи всем.

Верстал один макет и столкнулся с одной странностью в виде ИЕ9. Он не захотел уместить меню в 980пк, причем с очень большим отклонением от нормы. Хотя остальные все браузеры с ним не согласились и спокойно заняли все выделенное ему место.

Пробовал на инлайн-блоках и флотах - результат одинаковый. А теперь самое интересное. Помимо фф, оперы, хрома, меню влезло в ИЕ8 и даже в ИЕ7.Внимание, вопрос: почему?? Может это я уже глубокой ночью не соображаю и что-то не доглядел или я чего-то про 9-й не знаю? Вот хотел прояснить.

Пример

[psywalker]

У тебя у пунктов отступы разные в ИЕ9 и в других браузерах. Сама ширина пунктов больше.

Сделай так: padding: 10px 20px;

[Softlink]

У тебя у пунктов отступы разные в ИЕ9 и в других браузерах. Сама ширина пунктов больше.

Сделай так: padding: 10px 20px;

Это да, я уже иешной линейкой померил, что пункты отличаются размером. Вопрос-то: почему они отличаются?)) Причем так разительно.

Все, ушел спать, ничего уже не соображу.

[psywalker]

У тебя у пунктов отступы разные в ИЕ9 и в других браузерах. Сама ширина пунктов больше.

Сделай так: padding: 10px 20px;

Это да, я уже иешной линейкой померил, что пункты отличаются размером. Вопрос-то: почему они отличаются?)) Причем так разительно.

Все, ушел спать, ничего уже не соображу.

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

[buddah]

У меня такая же беда была в ие 9, и тоже с меню горизонтальным и тоже с инлайн-блоками. Тупо другие размеры указал для этого браузера и не заморачивался с теорией.

[SelenIT]

Насколько я понимаю, причина где-то здесь. Дальше тупо моя догадка: поскольку пиксели теперь абсолютная единица и однозначно переводятся в пункты, получается, размер у ссылок 8.25pt. Другие браузеры, видимо, умеют рисовать шрифты только из дискретного ряда округленных значений (ближайший — 8pt), тогда как IE9 со своим новым граф. движком выдает дробные пункты (или дробные пиксели — для рендерера это теперь одно и то же с точностью до масштабного коэф-та) во всей красе. Факт в пользу этой догадки — если выставить для IE9 размер шрифта 10.67px (соответствующий целым 8 пунктам), отображение становится гораздо ближе к отображению во всех браузерах...

[Gaspode]

Пардон, что слегка мимо темы, но мораль из этого какая? Задавать все емами, что ль?

[SelenIT]

Моя догадка не подтвердилась, провел эксперимент, получил такой результат:

Тут скриншот с IE9 наложен на скриншот с FF9, в IE все размеры почему-то чуть шире (даже 16px и 12px, однозначно переводимые в 12pt и 9pt соотв-но). Видимо, просто другой рендеринг, просто надо учитывать (как раньше учитывали возможно разную ширину текста со сглаживанием и без, а также вероятность другого шрифта на другой ОС).

С em-ами, боюсь, как бы не было еще хуже...

[DStereo]

Пардон, что слегка мимо темы, но мораль из этого какая? Задавать все емами, что ль?

В em'ах все браузеры округляют до трех цифер, например 13px - это .813em от стандартных 16, в то время как ie (7-9) округляет до .81em так что в ie ширина даже меньше получится, чем в других браузерах.

[Softlink]

Получается, что в большинстве случаев надо будет делать отдельные стили для этого осла, либо жестко фиксить размеры блоков. Вот ерунда какая!

[DStereo]

Получается, что в большинстве случаев надо будет делать отдельные стили для этого осла, либо жестко фиксить размеры блоков. Вот ерунда какая!

Как правило не обязятельно делать отдельные стили для ie, просто в ie все будет меньше на пару пикселей, если верстать в em. Так что особой разницы вы не заметите.

[SelenIT]

либо жестко фиксить размеры блоков

По-моему, скорее мораль "никогда не рассчитывайте на размер текстовой надписи строго до пикселя". Потому что, кроме IE9 и WinXP со сглаживанием и без оного, в мире есть Линуксы со своими дефолтными шрифтами каждая, Андроиды (тысячи их!), на которых шрифты тоже почему-то чуть крупнее нормы, и т.п. Имхо, правило "плюс-минус 2 шага текстового зума" — ну ладно, хотя бы плюс-минус 1 шаг — при кроссплатформенной верстке рановато сбрасывать со счетов...

[psywalker]

либо жестко фиксить размеры блоков

По-моему, скорее мораль "никогда не рассчитывайте на размер текстовой надписи строго до пикселя". Потому что, кроме IE9 и WinXP со сглаживанием и без оного, в мире есть Линуксы со своими дефолтными шрифтами каждая, Андроиды (тысячи их!), на которых шрифты тоже почему-то чуть крупнее нормы, и т.п. Имхо, правило "плюс-минус 2 шага текстового зума" — ну ладно, хотя бы плюс-минус 1 шаг — при кроссплатформенной верстке рановато сбрасывать со счетов...

Воот, я об этом и говорил. Рассчитывать на то, что шрифты везде будут одинаковыми, это по меньшей мере - делитанство. Чуть текст изменился и вёрстка разлетелась.

[Softlink]

либо жестко фиксить размеры блоков

По-моему, скорее мораль "никогда не рассчитывайте на размер текстовой надписи строго до пикселя". Потому что, кроме IE9 и WinXP со сглаживанием и без оного, в мире есть Линуксы со своими дефолтными шрифтами каждая, Андроиды (тысячи их!), на которых шрифты тоже почему-то чуть крупнее нормы, и т.п. Имхо, правило "плюс-минус 2 шага текстового зума" — ну ладно, хотя бы плюс-минус 1 шаг — при кроссплатформенной верстке рановато сбрасывать со счетов...

Если бы не влез 1-2 пикселя, то я бы вряд ли шум поднял. А ведь не влезло 17

[psywalker]

либо жестко фиксить размеры блоков

По-моему, скорее мораль "никогда не рассчитывайте на размер текстовой надписи строго до пикселя". Потому что, кроме IE9 и WinXP со сглаживанием и без оного, в мире есть Линуксы со своими дефолтными шрифтами каждая, Андроиды (тысячи их!), на которых шрифты тоже почему-то чуть крупнее нормы, и т.п. Имхо, правило "плюс-минус 2 шага текстового зума" — ну ладно, хотя бы плюс-минус 1 шаг — при кроссплатформенной верстке рановато сбрасывать со счетов...

Если бы не влез 1-2 пикселя, то я бы вряд ли шум поднял. А ведь не влезло 17

Это тут не влезло 17, а в другом браузере не влезет 19, и т.д. Тут дело не в этом. Ты для кого вёрстку делаешь, для себя, ради прикола или заказчику? Если второе, тогда я бы в жизни на шрифты палагаться не стал.

[SelenIT]

Если б какой-нибудь шальной линукс за неимением эриала отобразил бы это меню чем-то верданообразным — могло бы и 30 пикселей не влезть. На одной надписи (реально сталкивался с подобным, кажется в какой-то из 10-х Опер под убунтой)...

[Softlink]

Нууу фикс размеры, однако, тоже не выход из положения. Получается тогда только display:table (таблицы не в счет).

[SelenIT]

Для данного примера, сугубо имхо, CSS-таблица — самое то.

[Softlink]

Тогда раз уж затронули тему разных платформ, то хотелось бы услышать. Кто реально тестирует каждую свою верстку помимо win(по умолчанию), в MacOS и Linux?

У меня нет таких возможностей, да и ни разу требований со стороны заказчиков не было. Хотя двоим верстал макеты, которые сидят на Маках, нареканий не было. А сервисам я не особо доверяю, нативный есть нативный.

И еще. Как часто просят делать кросплатформенную(именно с тестированием) верстку у вас заказчики? У меня, как уже сказал, не было ни разу. Но я и верстал на заказ откровенно мало.

[buddah]

Тоже ни разу не заказывали именно кроссплатформ, возможно потому что о разнице в разных браузерах слышали, а о разнице на разных платформах - нет.

Я частенько в том же скайпе прошу товарищей с линухом и мак ос глянуть, в 99% случаев все было нормально. Иногда бывает что на Маке в Хроме нормально, а Сафари какой-то мелкий баг показывает.

[lexxcode]

По теме:

А почему не сделаешь на базе text-align:justify; ? Будет себе заполнять все доступное пространство, и ничего не должно отпадать, во-всяком случае в ie7+ и нормальных браузерах, может даже и в ie6 будет норм (хотя кому он уже нужен )

По последнему вопросу:

Я лично специально только под win проверяю или под Linux, в зависимости на чем в данный момент нахожусь. Под Mac вообще не тестирую ибо нет его у меня, но как правило, во всех системах все нормально. Под Mac изредка бывают весьма непонятные проблемы со шрифтами подключенными через @font-face, они там жирней отображаются, но т.к. своими глазами, кроме как на скринах, я этой проблемы не видел, то решения не нашел.

[Softlink]

По теме:

А почему не сделаешь на базе text-align:justify; ? Будет себе заполнять все доступное пространство, и ничего не должно отпадать, во-всяком случае в ie7+ и нормальных браузерах, может даже и в ie6 будет норм (хотя кому он уже нужен )

Чего за вариант такой?

[lexxcode]

Ну вот даже на форуме есть такое, Great Rash как-то предложил. Хотя я это делал несколько проще, но идея примерно та же.

У Great Rash вариант более не пробивной в том плане, что даже если на IE6-7 будет отключен js, эта штука все равно будет работать. У меня же не было li.helper непосредственно в разметке, он создавался на ПЭ :after, но тогда для IE6-7 нужно делать эмуляцию :after через expression, что в свою очередь не будет работать без js.

Edited January 22, 2012 by alexriz

[SelenIT]

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

Но тут вопрос, насколько я понимаю, не просто в равномерном распределении пространства, а еще и в разметке границ...

[CharlieCruz]

Рендеринг шрифта зависит от ОС и от конкретного браузера. Поэтому в разных браузерах и в разных ОС ширина пунктов навигации будет отличатся.

Если надпись «о компании» в Firefox будет шириной в 73 px то в ie9 возможно ширина будет 74px. Если каждый пункт меню будет шире хотя бы на 1px то навигация из 7 пунктов получится на 7px шире.

Об этом можно почитать тут Type rendering on the web. Это цикл из 7 статей и в самом начале поста есть навигация по всем частям: "This is our first post in an ongoing series about type rendering on the web. Read the second, third, fourth, fifth, sixth, and final posts."

P.S. С вероятностью 99.9% такая навигация на Mac OS в safari, chrome и firefox тоже б расползлась.

[lexxcode]

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

Но тут вопрос, насколько я понимаю, не просто в равномерном распределении пространства, а еще и в разметке границ...

хех, таки да. Я от туда только первые два поста прочел и все .

А когда-то еще где-то читал про такой подход к резиновой менюшке, и как-то сам дошел до использования ПЭ, вместо лишнего элемента в разметке.

А вообще я опростоволосился малость предложив этот вариант, в этом случае меню тянется за счет изменения расстояния между пунктами, а тут нужно, чтоб тянулись сами пункты.

Видимо либо таблицей, либо через display:table;. Более простых или кроссбраузерных вариантов, в голову не приходит.