Элементы CSS (со спрайтами) на iPhone / iPad неправильно масштабируются - PullRequest
Новая
       12

Элементы CSS (со спрайтами) на iPhone / iPad неправильно масштабируются

0 голосов
/ 14 апреля 2011

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

По какой-то причине на iphone / ipadмасштабируется неправильно, на самом деле мой, кажется, повторяет фон слева направо, а также высота не поддерживается, поэтому вы можете видеть другие изображения для спрайта.Если я установлю no-repeat на фоне, заполнится только половина контейнера div, и будет большой белый пробел справа от секции-заставки, а нижняя область с остальными спрайтами по-прежнему будет отображаться.

Я попытался изменить ширину и высоту, чтобы они были намного больше, я также попытался обернуть элемент в div с той же фиксированной высотой и шириной.Я также попытался добавить тег '', когда используются iphones / ipads.Ничто из этого не имело никакого значения.Кажется, что неупорядоченный список просто не хочет заполнять контейнер. 

<style media="screen">
#main{
 width: 985px;
 height: 1078px;
 background: url(../images/main.jpg);
 margin: 0px; 
 padding: 0;
 position: relative;
}

#main li {
 margin: 0; 
 padding: 0; 
 list-style: none;
}

#mainSection1 a { left: 642px; width: 193px; top: 282px; height: 18px; position: absolute; }
#mainSection1 a:hover { background: url(../images/main.jpg) -642px -1360px; }
/* ... and so forth */
</style>

<ul id="main">
   <li="mainSection1"><a href="anotherpage></a></li>
   <!-- there are 8 other list items here repeating the same -->
</ul>

1 Ответ

0 голосов
/ 14 апреля 2011

Вы можете решить повторяющуюся проблему, добавив no-repeat к своим объявлениям фона.

background: url (../ images / main.jpg) -642px -1360px no-repeat;

...