Question

我做错了什么？在Chrome，Firefox，Opera中它很酷但不在Safari / Explorer中。

父级位于右下角，child1位于父级之上（垂直居中于父级）。父母可能有不同的大小，孩子必须仍然在它上面。

example image

.cotainer{
   position: fixed;
   bottom: 0px;
   right: 0px;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   margin: 10px;
}


.parent {
   width: 80px;
   height:80px;
   min-width: 80px;
   min-height:80px;
   background-color:#8BBF46;
   border-radius:50%;
   bottom: 0px;
   right: 0px;
   position: relative;
   text-align: center;
   cursor: pointer;
   padding: 0;
   margin: 0;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 15px;
   order: 1;
   order: -webkit-1;
   order: -moz-1;
   order: -ms-1;
   order: -webkit-1;
}

.child1{
   position: absolute;
   bottom: 100%;
}

.child2{
   font-size: 16px;
   color: #222;
   padding: 0.4em;
   display: block;

}

.child2:hover{
   color: #fff;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="stylesheets/style-okrojone.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
    <div class="cotainer">
        <div class="parent">
            <div class="child1"><img src="https://i.stack.imgur.com/tbnsI.jpg" alt="grafika-dodatkowa"></div>
            <i class="child2">parent</i>
        </div>
    </div>

</body>

</html>

Answer 1

问题是，您的parent容器是Flexbox，但child1使用position: absolute。您不应对Flexbox中的元素使用绝对定位，因为它是not offically supported。

所以看起来chrome能够将它呈现为＆＃34;正确＆＃34;方式，但其他一些浏览器可能不是。最好的方法是改变你的布局，这样你就不再使用弹性箱和绝对位置了。

Answer 2

给你的img这些额外的样式

margin-left: -306px; /* has to be half of the image width */
position: absolute;
bottom: 0;

和.child1这些额外的样式

width: 100%;
left: 0;

希望这适合你...

在Explorer和Safari中证明内容

2 个答案: