溢出:隐藏未在iOS Safari浏览器中创建新的块格式上下文

问题描述

我正在尝试编写样式表来设置以下html的样式

body > * {
    width: 49%; /* should be 50% */
    display: inline-block;
    text-align: center;
    overflow: hidden;
    margin: 0;
}

body {
    margin: 0 auto;
    line-height: 0px;
    width: 80%;
}
<html><body>
<span><h1>some text here</h1></span>
<img src="img.png"></body></html>

但是在iOS Safari上,h1的底边距超出了基线,并且(在完整版中,它具有多行)将其余内容下推。如果我使用overflow: scroll,则可以解决Safari的问题,但在其他浏览器上会弄乱视图。如何检测到这是Safari并进行修复或使用其他方式构造块格式化上下文?我不希望使用Javascript,但我认为我有机会。

解决方法

Does overflow:hidden applied to <body> work on iPhone Safari?

body > * {
  position:relative;
  overflow:hidden;
}
,

问题不是块格式化上下文。取而代之的是Safari默认使用的vertical-align: text-bottomvertical-align: text-top通过强制内联块对齐其较高的基线(严格位于文本的边距或填充上方)来解决我的问题,而不是根据底部元素及其所具有的边距而变化的较低基线边距并不是从元素中“漏出”。

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...