CSS работает по-разному на определенных страницах, разница при использовании инструментов разработки

Question

У меня странный случай: на моем сайте http://tustincommercial.com некоторые страницы немного отличаются от других, что дает эффект прыжка.

Сравните http://tustincommercial.com против http://tustincommercial.com/who-we-are, чтобы увидеть эффект.

Разметка идентична, за исключением содержимого в середине. Используется тот же CSS.

Теперь, настоящим убийцей является то, что эта разница исчезает, когда инструменты разработчика открыты. Все браузеры (IE8, Chrome, Safari, Firefox, Opera) показывают разницу, когда инструменты разработчика не открыты. Никто из них не показывает разницы, когда их инструменты разработчика открыты.

Есть идеи о том, как найти и исправить источник разницы?

Answer 1

Проблема возникает из-за полосы прокрутки, которая появляется, когда ваш контент проходит за нижнюю часть окна. Когда инструменты разработчика открыты , все страницы должны прокручиваться, поэтому переход исчезает.

Есть несколько способов исправить это, но в настоящее время я не могу сказать вам, что будет лучше для вашего сайта. Вы можете сделать его фиксированной ширины, вы можете попробовать использовать max-width, или вы можете заставить полосу прокрутки присутствовать всегда:

html {
overflow-y: scroll;
}