iphone - html 在我电脑上的所有浏览器上都能正常工作，但是我用作可点击链接的 href 在 iphone 上的 safari 上移动了

Question

这是我用作按钮的两个 a href 的代码。

<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 上打开页面时，a hrefs 链接在浏览器上移动到右侧。

有什么想法吗？

Answer 1

屏幕分辨率因计算机和移动设备而异。例如，iPhone 4 的屏幕高 960px，宽 640px，而计算机可能有 1440px x 900px。 因此，定位绝对元素在不同的屏幕上会显示出不同的结果。

在您的标记中，使用 left:610px 会将元素 610px 移离左边距，从而出现在右侧。其他 left 和两个 top 属性也是如此。

因此，您的 left:610px 位置几乎靠近右侧，距离右侧只有 30px，所以如果您使用 right:30px 相反，它在 iPhone 上是一样的，但在其他屏幕上是不同的。

此外，使用 float + position:absolute 没有任何好处，因为它们相互矛盾。 我不知道这是否有帮助，但您可以将 float 与 position:relative 一起使用，这将导致能够根据当前位置重新定位 float 元素( float 的那个)。