父overflow子fixed IE兼容性问题

最新推荐文章于 2020-09-27 20:33:19 发布

xiting_blog

最新推荐文章于 2020-09-27 20:33:19 发布

阅读量309

点赞数

分类专栏： JavaScript0 文章标签：兼容性

本文链接：https://blog.csdn.net/onemango/article/details/89467159

版权

JavaScript0 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在写项目过程中，遇到一个IE11浏览器兼容问题：
父overflow: hidden;子position: fixed;，子溢出父的部分不显示
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ie兼容性测试</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .outer_box{
            position: relative;
            height:200px;
            background:#ccc;
            overflow: hidden;
            border-radius: 25px;
        }
        .inner_box{
            position: fixed;
            top:100px;
            left:100px;
            width:200px;
            height:200px;
            background:#fe6d6c;
        }
    </style>
</head>
<body>
    <div class="outer_box">
        <div class="inner_box"></div>
    </div>
</body>
</html>

效果如下：

谷歌浏览器
Alt
IE浏览器
Alt
解决：
设置border-radius: 0; 或 overflow: visible; 即可

xiting_blog

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
父overflow子fixed IE兼容性问题

在写项目问题中，遇到一个IE11浏览器兼容问题：父overflow: hidden;子position: fixed;，子溢出父的部分不显示代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ie兼容性测试</titl...
复制链接

扫一扫

专栏目录