父overflow子fixed IE兼容性问题

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


<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; 即可

你可能感兴趣的:(兼容性)