偏移 html 锚以调整固定标题 - Safari 上的不同 CSS答案

【问题标题】：Offsetting an html anchor to adjust for fixed header - different CSS on Safari偏移 html 锚以调整固定标题 - Safari 上的不同 CSS
【发布时间】：2021-10-23 09:26:22
【问题描述】：

我通过以下 CSS 向我的 HTML 锚点（我的主题具有固定的标题）添加了偏移量：

    margin-top: -175px;
    padding-top: 175px;
}

/* 760px and smaller screen sizes */
@media (max-width:760px){

    #randomClass1, #randomClass2, #randomClass3{
        margin-top: -160px;
        padding-top: 160px;
    }
    
}

/* 401px and smaller screen sizes */
@media (max-width:401px){

    #randomClass1, #randomClass2, #randomClass3{
        margin-top: -190px;
        padding-top: 190px;
    }
    
}

/* 317px and smaller screen sizes */
@media (max-width:317px){

    #randomClass1, #randomClass2, #randomClass3{
        margin-top: -220px;
        padding-top: 220px;
    }
}

除了移动版 Safari 之外，它适用于所有浏览器的所有分辨率。在分辨率低于 780 像素的 Apple 浏览器中（我在 iPhone 12 上以水平模式检查）margin-top 太低。知道问题仅存在于 Safari 中，我该如何解决？有没有办法只为这个浏览器更改 CSS？

或者也许有更好的方法来为 html 锚点添加偏移量，以使其在每个浏览器上看起来都一样？

【问题讨论】：

可能取决于 safari 底栏。我建议您使用 javascript 嗅探浏览器并在正文上添加一个特定的类。 stackoverflow.com/questions/9847580/…

标签： html css safari

【解决方案1】：

有没有办法只为这个浏览器更改 CSS？

是的，这里可能有一些适用于 Safari 的 CSS 选择器： is there a css hack for safari only NOT chrome? （您可以按屏幕尺寸过滤给定设备）

或者也许有更好的方法来为 html 锚点添加偏移量，以使其在每个浏览器上看起来都一样？

不是真的添加，而是通过重置 css 文件开头的 css。下面是一个 CSS 重置示例：https://meyerweb.com/eric/tools/css/reset/

【讨论】：