解决Safari桌面端Header文本被截断问题

问题根源 #

• Safari与Windows系统的字体渲染引擎存在差异，Century Gothic的粗体斜体样式在Safari下的字符宽度/高度表现更大，加上你设置的width:80%和margin-right:75%导致容器可用空间严重不足，最终触发文本截断。
• height:100%未匹配父容器的明确高度设置，可能导致容器高度无法适配文本实际尺寸。

修复方案 #

1. 调整容器宽度与外边距逻辑

移除冲突的width和margin-right设置，改用更稳定的布局方式，让容器自适应文本宽度：

.header{
    text-align: left;
    font-size: 55px;
    font-weight: bold;
    font-style: italic;
    color: #006400;        
    border-radius: 5px;
    margin-left: auto;
    /* 若需右侧间距，改用固定值而非百分比，比如 margin-right: 20px; */
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif,cursive;
}

2. 优化字体渲染适配Safari

添加字体渲染属性，减少跨浏览器的字符尺寸差异：

.header{
    /* 保留原有其他属性 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 可选：限制最大宽度并允许换行，防止极端情况 */
    max-width: 25%; /* 根据需求调整，替代原width+margin的组合 */
    word-wrap: break-word;
}

3. 修正容器高度设置

如果不需要固定容器高度，直接移除height:100%让容器自动适配文本；如果需要固定高度，确保父容器有明确高度值，同时添加溢出控制：

.header{
    /* 保留原有其他属性 */
    height: auto; /* 或设置固定值如80px，需确保父容器有对应高度 */
    overflow: visible;
}

验证建议 #

修改后在Safari桌面端测试，同时确认Windows端显示效果未受影响，保证跨浏览器一致性。

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