Sagemaker下Jupyter Notebook的hr标签在Brave浏览器渲染异常问询

问题根因 #

这是Amazon SageMaker自带的经典Jupyter Notebook（非Lab）的内置样式和行内样式的优先级冲突导致的，新版Chromium内核（你更新的Chrome、Brave都基于这个内核）收紧了混合属性简写/全写的CSS优先级判定规则：

• SageMaker经典Notebook内置了针对hr标签的全局样式hr { border-top: 1px solid #e5e5e5; }
• 你写的<hr style="border:3px solid black">使用border简写属性，在旧版Chromium里行内简写属性优先级高于全局的border-top单独属性，但新版内核判定全局的单独属性优先级高于行内简写属性，所以你的自定义样式被覆盖，就显示成默认的细灰线
• 本地Jupyter、SageMaker JupyterLab没有这个内置的border-top全局样式，所以渲染正常

可行解决方案 #

方案1：修改行内样式写法（最简单，无需改动环境配置） #

直接把hr标签的行内属性调整为指定border-top，优先级高于全局的border-top定义：

<hr style="border-top:3px solid black; margin: 1rem 0;">

不需要保留默认上下边距的话可以去掉后面的margin属性。

方案2：全局注入自定义CSS（适合批量适配大量旧笔记的场景） #

如果你有大量笔记已经使用原border简写写法，不想逐个修改，可以在SageMaker经典Notebook中注入优先级更高的规则：

1. 打开任意Notebook，新建代码单元格，输入以下内容执行即可临时生效：

from IPython.core.display import HTML
HTML("""
<style>
hr[style*="border"] {
    border: unset !important;
    border-top: 3px solid black !important;
}
</style>
""")

2. 如果需要永久生效，把上面的CSS规则添加到SageMaker实例的~/.jupyter/custom/custom.css文件中，重启Notebook实例后即可全局生效。

方案3：回滚浏览器版本（不推荐） #

回滚Chrome/Brave到更新前的版本可以临时解决问题，但会缺失安全补丁，不建议长期使用。

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