#css #position #background-image #rollover
#css — файл #положение #фоновое изображение #опрокидывание #css #background-image #перенос
Вопрос:
У меня есть настройка изображений ролловера на сайте, который я создаю, используя фоновые изображения css, вот так:
.rollover a {
display: block;
width: 400px;
height: 400px;
background: transparent url(hover.jpg) no-repeat;
}
.rollover a:hover {
background-position: -400px 0;
}
Это отлично работает во всех браузерах, однако на iphone я, кажется, получаю дополнительный 1 пиксель с правой стороны (поэтому он показывает 401px, а не 400px), поэтому в итоге на главной странице отображается 1 пиксель изображения ролловера, что, очевидно, неверно. Если кто-нибудь может предложить какую-либо причину, по которой это может происходить, я был бы безмерно благодарен.
Большое всем спасибо, как всегда!
Дэйв
Комментарии:
1. вы уже выполняете сброс css для каких-либо элементов? например
*{margin:0;padding:0;}2. Звучит как проблема с округлением с глупым названием «дисплей retina» . Если ваш сайт не указывает iphone не увеличивать масштаб или у вас нет стиля для удвоенного соотношения пикселей на iphone 4, у вас, скорее всего, возникнет эта проблема.
3. @TimJoyce — Да, я уже сбросил все элементы, используя *{marign: 0;padding: 0;}
4. @KevinPeno — На самом деле я тестирую это на iphone 3, а не на iphone4, поэтому я не думаю, что это проблема с дисплеем retina, к сожалению. Существуют ли какие-либо другие проблемы с отображением, которые могут быть причиной этого, связанные с iphone 3, о которых вы знаете? Большое спасибо за вашу помощь
5. @deshg, поскольку мобильные телефоны выполняют масштабирование страниц (обычно уменьшая их), неизбежно возникают проблемы с округлением. Поскольку iPhone3 имел ширину пикселя 320 пикселей, а вы работаете с разрешением 400 пикселей, возможно, вы столкнулись с этой проблемой. Я бы посоветовал вам пересмотреть свои стили.
Ответ №1:
Попробуйте добавить это .rollover a {overflow:hidden}
Комментарии:
1. Мне нравится ваш стиль, это звучит как то, что могло бы сработать, но, к сожалению, у меня точно такая же проблема даже после добавления скрытого переполнения, так что, к сожалению, это, похоже, не исправит ее: (Я думаю, что это должно быть что-то подобное, что требуется, поскольку я только что получил IPAD 2, и у меня точно такая же проблема с этим, но не с любым другим браузером / устройством (он даже корректно отображается на моем старом blackberry!). Большое спасибо за вашу помощь и любые другие идеи, которые у вас могут возникнуть! Дэйв
2. @deshg У меня такая же проблема при работе с iPad «возможно, у кого-то в сообществе есть другое возможное решение.