Что может заставить один и тот же браузер на разных ПК отображать один и тот же HTML-код по-разному?

Я в тупике. Клиент и я оба запускаем Firefox 3.0.12 на машинах XP. Мы просматриваем одну и ту же страницу в одном и том же браузере на разных машинах и получаем разные результаты. Примечание. Все браузеры IE совместимы на обеих машинах, и мой FF 3.5.1 совместим с моим FF 3.0.12. (У него не установлен FF 3.5.x, чтобы сравнивать).

Существует разница в 1 пиксель, из-за которой его заголовок div (все изображения, без текста) переносится. Моя в порядке. Если я расширю его заголовок на 1 пиксель (через редактирование CSS Firebug), это сработает.

Итак, мой вопрос: какие еще переменные влияют на рендеринг??

Я пытаюсь думать «нестандартно», потому что кажется, что это должно работать точно так же.

Мы очистили кеш браузера. Я сделал diff для источника HTML, и кроме отметки даты и времени javascript и кода отслеживания javascript var, источники идентичны.

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

Кто-нибудь еще сталкивался с чем-то подобным раньше? Что я должен проверить/отладить дальше?

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

Изменить 2: я изменил все виды шрифтов и размеров (как системные настройки шрифта по умолчанию, так и в Firefox) на своем компьютере, чтобы попытаться воспроизвести проблему. Я изменил стиль рендеринга (стандартный или прозрачный). Нада. Проблема почти наверняка не связана со шрифтом. Мне нужно посмотреть, смогу ли я получить дополнительный доступ к компьютеру клиента, чтобы воспроизвести проблему.


layout internet-explorer firefox pixel
person Keith Bentrup    schedule 03.08.2009    source источник
comment
Размер шрифта также может влиять на высоту строки, даже если у вас нет текста.   -  person Tim Booker    schedule 04.08.2009

Ответы (12)


arrow_upward
5
arrow_downward

Поскольку мы не можем просмотреть сайт в наших собственных браузерах, вот процесс, который я бы использовал, чтобы попытаться решить проблему:

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

  • Какой бы блок кода вы ни удалили в последний раз, чтобы все идеально выровнялось (даже если вам не хватает фрагмента в теле), это почти то место, где находится виновник.

  • Поскольку вы нашли виновника, поместите весь код обратно. Сначала начните возиться со шрифтами. Изменяйте шрифты, размеры, удаляйте текст и т. д. пока не найдете условие, при котором браузеры будут одинаковыми. Если проблема не в шрифте, начните возиться с другими его частями, пока не добьетесь нужного результата. нашел условие, которое соответствует этому.

  • Как только вы это сделаете, вы узнаете свою проблему и сможете ее обойти.

person James Skidmore    schedule 03.08.2009
comment
+1 В итоге клиент решил жить с разницей на своем компе. Я не мог диагностировать это дальше на этом компьютере, но я согласен, что это был бы правильный путь. - person Keith Bentrup; 28.08.2009

arrow_upward
5
arrow_downward

ЕСЛИ вы используете Firefox, убедитесь, что вы нажали Ctrl-0, чтобы установить уровень масштабирования по умолчанию.

person Hardryv    schedule 03.08.2009
comment
Это, очевидно, может быть причиной другого визуального представления (особенно это повлияет на обтекание), но не должно ли это привести к отклонению более чем на 1 пиксель? - person Dirk Vollmar; 04.08.2009
comment
Firefox допускает примерно 15 уровней масштабирования, а также регулирует размер графики; таким образом, я считаю, что 1px, вероятно, будет минимумом - person Hardryv; 04.08.2009

arrow_upward
3
arrow_downward

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

Кроме того, на Mac шрифты по умолчанию — без засечек, тогда как в Windows все — с засечками, что также может еще больше изменить ширину и высоту шрифта.

Если что-либо на вашей странице указано в единицах «em» или «ex», они зависят от размера шрифта.

person Karl    schedule 03.08.2009

arrow_upward
2
arrow_downward

Я бы сравнил плагины/аддоны.

person Matt Howell    schedule 03.08.2009

arrow_upward
2
arrow_downward

Как насчет ваших настроек сглаживания шрифтов - они одинаковые (нет/сглаживание/ClearType)? Это может изменить ширину данного текста и может быть именно тем, что вы ищете.

person Michael Madsen    schedule 03.08.2009

arrow_upward
2
arrow_downward

Вы оба используете один и тот же размер экрана? Пытается ли Firefox масштабировать шрифты до видимого размера человека, просматривающего страницу, или до определенного количества пикселей?

person Juan    schedule 03.08.2009

arrow_upward
1
arrow_downward

Одна вещь, которая приходит на ум, это установленные шрифты. Если у вас есть шрифт, которого нет у клиента, может быть разница в 1 пиксель в вычисленном размере. FF и IE могут округляться по-разному, что объясняет, почему они ведут себя по-разному.

person Lucky    schedule 03.08.2009

arrow_upward
1
arrow_downward

Я в основном согласен со всеми «парнями со шрифтами» далее, но если это не поможет, попробуйте проверить заголовки HTTP, поскольку некоторые заголовки могут быть добавлены прокси-серверами и т. д. между сервером и вашим клиентом. Но сначала попробуйте варианты шрифтов...

Удачи ;)

person Thomas Hansen    schedule 03.08.2009

arrow_upward
0
arrow_downward

РАЗНЫЕ операционные системы имеют разные механизмы рендеринга шрифтов. Сильно отличается. Более чем достаточно, чтобы вызвать разницу хотя бы в 1 пиксель, в зависимости от того, как вы настроили свой CSS.

person Breton    schedule 03.08.2009

arrow_upward
0
arrow_downward

Мое первое предположение связано с окном, я не помню, чтобы это когда-либо происходило в Firefox, но все равно попробуйте изменить размер окна. Также возможно, что на самом деле это пространство занимает что-то шириной 1 пиксель, например, скрытая рамка или что-то еще. Это может быть совершенно неуместно, так как я не знаю, как вы на самом деле сделали это.

Возможный обходной путь — отображение одного из изображений в качестве фона для div вместо использования тега img, это приведет к тому, что оно будет просто усечено вместо переноса, если оно отклоняется на 1 пиксель.

person Karl    schedule 04.08.2009

arrow_upward
0
arrow_downward

Я видел эту проблему однажды, и, как оказалось, пользователь увеличил страницу, и масштабирование вызвало проблемы с математическим округлением. Я непреднамеренно увеличил свою страницу до 120%, у них были обычные 100%.

person Debby P.    schedule 24.05.2012
comment
Это, вероятно, было бы намного более заметным, чем опубликованная проблема, не так ли? - person Nikana Reklawyks; 22.10.2012

arrow_upward
0
arrow_downward

С текущим обновлением в браузере настройки масштабирования браузера принимают настройки системы в dpi.

В Windows 7 установка dpi = 125% создаст эффект увеличения при 100% увеличении окна браузера.

Таким образом, это не связано с HTML. то есть сказать, что настройки ширины = 300 пикселей будут создавать окна разного размера в том же браузере с теми же настройками масштабирования, но с разными настройками dpi.

Dpi = 125% создаст большую коробку.

Итак, если вы хотите уменьшить уровень масштабирования, либо уменьшите масштаб браузера, нажав ctrl + -, либо уменьшите настройки системы dpi, выполнив следующие действия.

  1. Для Windows 10 http://www.windows10update.com/2015/05/windows-10-tutorials-79-change-dpi-scaling-level-for-displays/
  2. Для Windows 7 http://www.lawfirmsoftware.com/support/change_dpi_settings_windows_7.htm
person Akshay Vijay Jain    schedule 09.03.2017