Safari 不显示/渲染图像的 css

Question

我的 GitHub 页面网站上有一个个人资料图片，它使用一些 CSS 使其看起来很酷。图像在 chrome 或 Firefox 中显示完美，但在 safari 中似乎忽略了图像的所有 css。

在 Chrome 上，图像显示正确，我可以看到图像的 css 规则已应用，但在 safari 中却没有。 （我希望我解释正确）

这是图像的 html 代码。

<div id="page-welcome">
            <div class="container">
                <h1 id="main-title">
                    <a href="https://github.com/z00mm00z"><img id="profile-photo" src="https://avatars.githubusercontent.com/u/109625312?v=4"/></a>
                    Hello! I'm Robert
                </h1>
                <p>Welcome to my website.</p>
            </div>
        </div>

这是该代码的 CSS：

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;

    a {
        float: right;
    }

    img { /* this img css is not being displaying on safari */
        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;
    }

    img:hover {
        border-radius: 25%;
    }
}   

我相当确定问题是 safari 没有显示/使用/显示/渲染图像的 css 代码，但我不知道如何确认这种情况或如何解决它。

我尝试过删除过渡并寻找 safari 不支持的样式，但无法弄清楚。

谢谢

Answer 1

正如 @tacoshy 所说，某些浏览器要么还不允许嵌套，要么只允许嵌套 id 和类，但一般不允许嵌套标签。

我改变了这个：

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;

    a {
        float: right;
    }

    img { /* this img css is not being displaying on safari */
        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;
    }

    img:hover {
        border-radius: 25%;
    }
}   

对此：

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 { /* this img css is not being displaying on safari */
    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%;
}

（我去掉了嵌套）