问题描述
我正在尝试编写样式表来设置以下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-bottom
。 vertical-align: text-top
通过强制内联块对齐其较高的基线(严格位于文本的边距或填充上方)来解决我的问题,而不是根据底部元素及其所具有的边距而变化的较低基线边距并不是从元素中“漏出”。