Safari浏览器不渲染图片CSS样式问题求助

问题根源在于你使用了CSS嵌套语法——这是CSS的新特性，Chrome、Firefox已原生支持，但Safari（尤其是15.4版本之前的）不支持原生CSS嵌套，导致嵌套的img、a等样式规则被完全忽略，检查面板里自然看不到对应的规则。

修改后的兼容版CSS代码 #

把嵌套规则展开为标准的后代选择器写法，Safari就能正常识别：

div#page-welcome {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 100px;
    margin-bottom: 100px;
}

div#page-welcome a {
    float: right;
}

div#page-welcome img {
    width: 128px;
    height: 128px;
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
    display: block;
    margin: 10px;
    overflow: hidden;
    border-color: #ffffff;
    background-color: #ffffff;
    transition: border-radius 0.5s;
}

div#page-welcome img:hover {
    border-radius: 25%;
}

额外建议 #

1. 刷新Safari后，检查面板里就能看到img的CSS规则生效
2. 如果想继续使用CSS嵌套语法，需要借助PostCSS等工具将嵌套代码编译为浏览器兼容的标准CSS，GitHub Pages可通过GitHub Actions配置自动编译流程
3. Safari对transition属性支持正常，无需移除该规则

内容的提问来源于stack exchange，提问作者z00mm00z