时间戳

首页 > 解决方案 > 溢出：隐藏不会在 iOS Safari 上创建新的块格式化上下文

html - 溢出：隐藏不会在 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，但我认为有机会我必须这样做。

标签： htmlcss

解决方案

是否溢出：隐藏应用于 <body> 在 iPhone Safari 上工作？

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

推荐阅读