safari margin-bottom失效的一种场景

今天帮同事排查一个问题时,发现了一个只在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%;}这种非常规代码。

https://ishowshao.com/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容