html – 同一高度的div的奇怪错误与不同的z-index重叠并隐藏了父溢出：border-bottom始终可见？

概述我创建了一个非常好用的速度表,并且可以点亮(使用 CSS3,html和js代码). 但是我注意到了iphone的一个奇怪的错误…. 这是代码： $('#first').addClass('first-start');//SECOND BAR$('#second').addClass('second-start');setTimeout(function() { $('#secon 我创建了一个非常好用的速度表,并且可以点亮(使用 CSS3,HTML和Js代码).
但是我注意到了iphone的一个奇怪的错误….

这是代码：

$('#first').addClass('first-start');//SECOND bar$('#second').addClass('second-start');setTimeout(function() {  $('#second').addClass('second-pause');},400);

#page {  margin-top: 50px;  wIDth: 300px;  height: 300px;  background-color: #000;  border-radius: 8px;  display: flex;  align-items: center;  justify-content: center;  flex-direction: column;  z-index: 4;  overflow: hIDden;}#Box-first,#Box-second {  wIDth: 200px;  height: 100px;  background-color: #fff;  border-radius: 200px 200px 0 0;  margin-top: 10px;  margin-bottom: 10px;  position: relative;  display: flex;  justify-content: flex-end;  align-items: flex-start;  z-index: 3;  overflow: hIDden;}#first,#second {  border-radius: 200px 200px 0 0;  margin: 0;  background: red;  wIDth: 200px;  height: 100px;  transform: rotate(180deg);  -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg);  -ms-transform: rotate(180deg);  -o-transform: rotate(180deg);  transform-origin: 50% 100%;  -webkit-transform-origin: 50% 100%;  -moz-transform-origin: 50% 100%;  -ms-transform-origin: 50% 100%;  position: absolute;  top: 0px;  right: 0px;  border: 0;  z-index: 1;}#n1,#n2 {  Font-size: 20px;  color: #fff;  Font-weight: bold;  position: absolute;  left: 50px;  right: 0;  text-align: center;  top: 50px;  bottom: 0;  display: flex;  align-items: flex-end;  justify-content: center;  wIDth: 100px;  height: 50px;  background: #000;  border-radius: 100px 100px 0 0;  z-Index: 1;  overflow: hIDden;}@keyframes first {  0% {    background-color: green;    transform: rotate(180deg);  }  33% {    background-color: yellow;    transform: rotate(240deg);  }  66% {    background-color: orange;    transform: rotate(300deg);  }  100% {    background-color: red;    transform: rotate(360deg);  }}@keyframes second {  0% {    background-color: green;    transform: rotate(180deg);  }  33% {    background-color: yellow;    transform: rotate(240deg);  }  66% {    background-color: orange;    transform: rotate(300deg);  }  100% {    background-color: red;    transform: rotate(360deg);  }}.first-start,.second-start {  animation: first 2s linear forwards;}.first-pause,.second-pause {  animation-play-state: paused;}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script><div ID="page">  <div ID="Box-first">    <div ID="first"></div>    <div ID="n1">1500</div>  </div>  <div ID="Box-second">    <div ID="second"></div>    <div ID="n2">270</div>  </div></div>

使用iphone,所以使用safari,在(在底部)div#n1(黑色div,其中有数字1500)可见一个小的白色边框或有时红色(如#first).
这是不可能的,因为容器有溢出：隐藏,所有div都有不同的z-Index,#n1的绝对位置是正确的.

怎么可能？

谢谢,抱歉我的英语

这是Jsfiddle：这是Jsfiddle：https://jsfiddle.net/k85t9zgq/33/

这是一个BUG的截图：

这是新的“BUG”添加框大小：边框

在我看来,添加这个新属性不起作用overflow：hIDden属性.
有可能吗？

解决方法 我无法测试这一点,但我很确定它与背景默认情况下使用background-clip border-Box这一事实有关,这在某种程度上是一个反复出现的问题.一个潜在的解决方法是通过添加一个小填充和调整背景剪辑使背景远离边界

$('#first').addClass('first-start');//SECOND bar$('#second').addClass('second-start');setTimeout(function() {  $('#second').addClass('second-pause');},#Box-second {  wIDth: 200px;  height: 100px;  /* Changes*/  background: linear-gradIEnt(#fff,#fff) content-Box;  padding:1px;  Box-sizing:border-Box;  /**/  border-radius: 200px 200px 0 0;  margin-top: 10px;  margin-bottom: 10px;  position: relative;  display: flex;  justify-content: flex-end;  align-items: flex-start;  z-index: 3;  overflow: hIDden;}#first,.second-pause {  animation-play-state: paused;}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script><div ID="page">  <div ID="Box-first">    <div ID="first"></div>    <div ID="n1">1500</div>  </div>  <div ID="Box-second">    <div ID="second"></div>    <div ID="n2">270</div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 同一高度的div的奇怪错误与不同的z-index重叠并隐藏了父溢出：border-bottom始终可见？全部内容，希望文章能够帮你解决html – 同一高度的div的奇怪错误与不同的z-index重叠并隐藏了父溢出：border-bottom始终可见？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。