今天帮同事排查一个问题时，发现了一个只在safari浏览器会出现的问题，由于排查的代码过于复杂，我对问题做了最简化抽象来复现。
问题概要描述：在safari中，当内容高度超出所有父容器时，内容的margin-bottom设置是无效的。（网上有一两条询问设置html body的高度为100%，margin-bottom在safari里失效的问题，这不是最根本的复现方法）
这个问题在某些场景下就会导致内容被遮挡，显示不全等UI上的BUG。而且Mac和iPhone上的Safari都有这个问题。
可以通过例子看出safari和chrome/firefox的明显表现差异，复现代码如下（用那些注释掉的height: 100%也可复现）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<meta name="viewport" content="width=device-width">
<style>
html {
/*height: 100%;*/
}
body {
/*height: 100%;*/
margin: 0;
}
#container {
/*height: 100%;*/
height: 1000px;
border: 1px solid black;
}
#content {
margin-bottom: 50px;
}
#fixed {
position: fixed;
background-color: rgba(0, 0, 0, 0.3);
height: 50px;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div>row</div>
<div>row</div>
...重复很多行row，让content内容超出container
<div>row</div>
</div>
<div id="fixed"></div>
</div>
</body>
</html>
滚动内容到最底部，chrome和Safari显示差别如下
chrome和Safari显示差别
解决这个问题的办法也很简单，只要规避这种超出所有父容器的内容即可。上面那个例子里只要container不设置高度即可。另外尽量少用html, body {height: 100%;}这种非常规代码。
关注公众号，获得更多技术文章
JS随笔
网友评论