Абсолютное позиционирование варьируется на 1 пиксель
У меня есть один фон для моего сайта, прикрепленный к верхнему центру. У меня есть несколько пустых s, которые при наведении курсора мыши должны переключать отображение абсолютно позиционированного с другим фоном, который должен совпадать с исходным фоном.
Функциональность все работает отлично; однако фон с не всегда совпадает. Он варьируется в зависимости от размера экрана на 1 пиксель.
Это происходит в Chrome, но не в Dreamweaver. Я не проверял другие браузеры.
Есть идеи?
2 ответа
Проблема была на самом деле проблема рендеринга субпикселя. Я просто изменил CSS элемента с "left: 0px;" "влево: -0,5 пикселей;" и все работает отлично.
Спасибо Майку Робинсону за его комментарий и ссылку: http://css3wizardry.com/2010/10/05/subpixel-rendering-2/
Живое представление Dreamweaver - это шутка, не доверяйте ему ни в чем другом, кроме грубого предварительного просмотра, особенно разницы в один пиксель. Протестируйте в основных браузерах и используйте CSS reset или normalize.css, прежде чем применять свой собственный стиль, если такие вещи, как различие в один пиксель, представляют для вас проблему.
CSS Reset - Сбрасывает все стили до 0, чтобы все браузеры начинали с одинаковых базовых стилей. Недостатком является то, что вы должны стилизовать каждый элемент, который вы намереваетесь использовать, такие вещи, как списки, больше не будут иметь стиля по умолчанию и будут отображаться как обычный текст. http://meyerweb.com/eric/tools/css/reset/
Normalize.css - это немного более удобно для пользователя, чем сброс, он дает всем базовым элементам одинаковый стиль, так что все основные настройки браузера по умолчанию покрыты и отображаются одинаково. http://necolas.github.com/normalize.css/