Question

以下带有固定标题栏位置的简单页面，在大多数浏览器中都能正常工作等。但是在谷歌浏览器的iOS上，如果你在页面上下滚动，最终标题栏会向下移动一点，如下所示屏幕截图。

任何想法如何解决？

谢谢：）

<!DOCTYPE html>
<html>
<head>
    <title>position test</title>
    <meta charset="utf-8" />
</head>
<body>
    <div style="position: fixed; background-color: aqua; width: 100%; top: 0; left: 0; line-height: 60px; height: 60px;">
        Fixed header
    </div>
    <div style="padding-top: 60px;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta aliquet dictum. Aliquam massa libero, consectetur et purus sed, luctus porttitor ligula. Phasellus tempus risus at elit sagittis, sed tincidunt erat rutrum. Donec non dictum turpis. Vestibulum sapien tellus, tincidunt sed ex a, pretium facilisis est. Suspendisse potenti. Fusce laoreet turpis turpis, a rhoncus diam fringilla ac. Proin turpis arcu, hendrerit viverra neque quis, placerat tempor ligula. Duis ut scelerisque ante. Etiam posuere est ut molestie fermentum. Sed feugiat tortor at libero ultrices, vitae consectetur nibh luctus.
        </p>
        <p>
            Sed nulla enim, tincidunt non laoreet quis, congue aliquam nisl. Sed dapibus in erat cursus rutrum. Nullam efficitur sem ipsum, vitae sagittis est tristique vitae. Ut dignissim est eget nisi condimentum posuere. Duis nec neque tempor, finibus sem sed, varius risus. Nullam convallis imperdiet sem vel sagittis. Nulla ultricies sagittis vestibulum. In semper ante ipsum, ac dignissim diam bibendum et. Nam in sapien sem.
        </p>
        <p>
            Phasellus neque nibh, pharetra ac dui et, iaculis lacinia ipsum. Phasellus laoreet eros ut lectus viverra dictum. Mauris vitae neque maximus, hendrerit enim gravida, ornare magna. Sed rhoncus vitae nunc sed iaculis. Donec vitae enim ut enim fermentum scelerisque. Nulla ut vestibulum leo. In ut urna in neque tempor maximus non et massa. In eu tincidunt quam. Donec eu lectus vehicula, consequat enim et, porttitor libero. Phasellus magna tellus, rhoncus non quam vitae, congue sagittis nunc. Mauris bibendum ultrices arcu a lobortis. Aliquam erat volutpat. Ut quis mi sit amet nulla tincidunt tincidunt.
        </p>
        <p>
            Nam at interdum nulla, eget ultricies libero. Suspendisse est elit, malesuada sit amet hendrerit nec, posuere et purus. Vivamus sed eros ut nisi cursus hendrerit. Curabitur vel lacus maximus, tempus nulla sed, volutpat risus. Etiam in blandit quam. Nullam lacinia neque eu ligula lobortis facilisis. Quisque ipsum erat, iaculis vitae nunc vitae, egestas feugiat enim.
        </p>
        <p>
            Fusce consectetur leo in est sodales, ut congue est commodo. Donec cursus odio sapien, id malesuada sem dictum eget. Sed sit amet sodales nisl, sed venenatis tortor. Nulla facilisi. Maecenas maximus tortor sed nisi mattis luctus. Proin id diam sagittis ante pulvinar dictum. Donec volutpat nec nibh eget dictum. Donec tellus turpis, hendrerit et risus sed, viverra porttitor leo. Pellentesque non vulputate arcu, eget finibus tortor.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta aliquet dictum. Aliquam massa libero, consectetur et purus sed, luctus porttitor ligula. Phasellus tempus risus at elit sagittis, sed tincidunt erat rutrum. Donec non dictum turpis. Vestibulum sapien tellus, tincidunt sed ex a, pretium facilisis est. Suspendisse potenti. Fusce laoreet turpis turpis, a rhoncus diam fringilla ac. Proin turpis arcu, hendrerit viverra neque quis, placerat tempor ligula. Duis ut scelerisque ante. Etiam posuere est ut molestie fermentum. Sed feugiat tortor at libero ultrices, vitae consectetur nibh luctus.
        </p>
        <p>
            Sed nulla enim, tincidunt non laoreet quis, congue aliquam nisl. Sed dapibus in erat cursus rutrum. Nullam efficitur sem ipsum, vitae sagittis est tristique vitae. Ut dignissim est eget nisi condimentum posuere. Duis nec neque tempor, finibus sem sed, varius risus. Nullam convallis imperdiet sem vel sagittis. Nulla ultricies sagittis vestibulum. In semper ante ipsum, ac dignissim diam bibendum et. Nam in sapien sem.
        </p>
        <p>
            Phasellus neque nibh, pharetra ac dui et, iaculis lacinia ipsum. Phasellus laoreet eros ut lectus viverra dictum. Mauris vitae neque maximus, hendrerit enim gravida, ornare magna. Sed rhoncus vitae nunc sed iaculis. Donec vitae enim ut enim fermentum scelerisque. Nulla ut vestibulum leo. In ut urna in neque tempor maximus non et massa. In eu tincidunt quam. Donec eu lectus vehicula, consequat enim et, porttitor libero. Phasellus magna tellus, rhoncus non quam vitae, congue sagittis nunc. Mauris bibendum ultrices arcu a lobortis. Aliquam erat volutpat. Ut quis mi sit amet nulla tincidunt tincidunt.
        </p>
        <p>
            Nam at interdum nulla, eget ultricies libero. Suspendisse est elit, malesuada sit amet hendrerit nec, posuere et purus. Vivamus sed eros ut nisi cursus hendrerit. Curabitur vel lacus maximus, tempus nulla sed, volutpat risus. Etiam in blandit quam. Nullam lacinia neque eu ligula lobortis facilisis. Quisque ipsum erat, iaculis vitae nunc vitae, egestas feugiat enim.
        </p>
        <p>
            Fusce consectetur leo in est sodales, ut congue est commodo. Donec cursus odio sapien, id malesuada sem dictum eget. Sed sit amet sodales nisl, sed venenatis tortor. Nulla facilisi. Maecenas maximus tortor sed nisi mattis luctus. Proin id diam sagittis ante pulvinar dictum. Donec volutpat nec nibh eget dictum. Donec tellus turpis, hendrerit et risus sed, viverra porttitor leo. Pellentesque non vulputate arcu, eget finibus tortor.
        </p>
    </div>
</body>
</html>

Answer 1

你尝试过使用！重要吗？

<div style="position:fixed !important; top:0px !important; left:0px !important;">

当您滚动时，顶部标题栏的位置固定在iOS chrome上

1 个答案: