В чем заключается причина неправильного отображения верстки на iMac?

Question

[noxfort]

У нас в офисе есть три мака, и все по разному показывают сайт.
bsk.d3b.ru
На iMac 21 c Maveriks (Chrome, Safari) неправильно показываются кнопки и блок «Почему»



На iMac 21 c Yosemite показывается все правильно (Chrome,Safari)
На iMac 27 с Yosemite в Chrome едет блок «Контакты», хотя со всем остальным везде в порядке


На каждом стоит последняя версия Хрома
В чем может быть причина?

Answer 1

[Aleksandr]

Ну с цифрами вы явно забыли указать соответствующий line-height.

С контактами - не влезают просто по ширине инлайн-блоки ваши. У среднего сделайте марджины поменьше, или блокам добавьте ширину нужную.

С кнопками не видно что не так. Кроме неправильной разметки.

Верстка у вас просто кошмар конечно. Одни фоновые картинки сделанные через дополнительный div class="bg" с position: absolute; чего стоят...

На маки денег у компании хватило, на верстальщика не хватает? ))

Comments

[noxfort]

>Ну с цифрами вы явно забыли указать соответствующий line-height.
Спасибо, но к сожалению проблема так и осталась.

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

>С кнопками не видно что не так. Кроме неправильной разметки.
Кнопка отличается только на одном маке, в других в порядке.

>Верстка у вас просто кошмар конечно. Одни фоновые картинки сделанные через дополнительный div class="bg" с position: absolute; чего стоят...
Да глупо как-то, согласен с вами. А можете подсказать что еще не правильно?

>На маки денег у компании хватило, на верстальщика не хватает? ))
Мы бы хотели вам предложить работу, можете скинуть портфолио на [e-mail]? Возможна удаленка

[Aleksandr]

noxfort: так вам надо line-height ставить 76px, по высоте вашего кружка, а не 20 как вы сделали и убрать padding вообще.

На счет влезает или нет - вобще с маржинами в таких ситуациях плохо, т.к. шрифт на разных машинах по разному могут рендериться. Я бы делал через text-align: justify; с хаком для последней строки через :after{ display: inline-block; width: 100%}

Да там почти все нет так )) И даже инлайновые стили в добавок.

На счет работы - вряд ли сможете заинтересовать, тем более что с Битриксом работать не буду принципиально ))

Портфолио вот тут можно глянуть - https://www.fl.ru/users/spbsite/

[noxfort]

Aleksandr: спасибо большое! Переделал некоторые вещи и проблемы решились =) по поводу говнокода, нельзя же взять и сразу все делать хорошо - все приходит со временем и опытом =)