html отлично работает во всех браузерах на моем компьютере, но href, который я использую в качестве интерактивных ссылок, перемещается в Safari на iphone

Question

Это код для двух ссылок, которые я использую в качестве кнопок.

<div style="position:absolute; left:610px; top:630px; float:left" id="stylescroll">


<font color="#33FF66"><a href="javascript:changecolor(-1)" style="cursor:pointer; text-decoration:none; padding-bottom:20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></font>

</div>

<div style="position:absolute; left:760px; top:630px; float:left" id="stylescroll2">

<font color="#33FF66"><a href="javascript:changecolor(1)" style="cursor:pointer; text-decoration:none; padding-bottom:20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></font>

</div>

Опять же, позиционирование во всех браузерах на моем компьютере работает нормально, однако, когда я открываю страницу на моем iphone, ссылки hrefs перемещаются вправо в браузере.

Есть идеи?

Answer 1

Разрешение экрана отличается от компьютера к мобильному устройству. Например, iPhone 4 имеет экран высотой 960 пикселей и шириной 640 пикселей, тогда как компьютер может иметь разрешение 1440 пикселей на 900 пикселей. Следовательно, позиционирование абсолютных элементов будет показывать разные результаты на разных экранах.

В вашей разметке использование left:610px отодвинет элемент 610px от левого поля, появившись в правой части. То же самое относится и к другим left и обоим top свойствам.

Таким образом, ваши left:610px расположены почти рядом с правой стороной, всего на 30px от правого, поэтому если вы используете right:30px, на iPhone это будет то же самое, но на других экранах будет другим.

Более того, нет смысла использовать float + position: absolute, потому что они противоречат друг другу. Я не знаю, помогает ли это, но вы можете использовать float с position:relative, что приведет к возможности изменения положения плавающего элемента относительно его текущей позиции (плавающей).