自从在多部 iPhone 和 iPad 上升级到 iOS 7 后,我们看到我们网站上的部分 UI 发生了一些非常奇怪的事情。
所附图像中的粉红色框位于绝对定位的父级内,它有两个绝对定位在其中的白色 div,每个 div 具有不同的不透明度。粉红色的圆圈只是一个设置了边界半径以使其成为圆形的 div。此布局中根本没有图像。
出于某种原因,浏览器间歇性地拉伸粉红色的 div,但我想不出任何会导致它的东西 - 如果我想的话,我不知道如何实现这种效果!
我认为这是浏览器中的错误,但我不知道如何修复它。
我没有包含任何代码,因为它非常非常简单,并且没有任何东西会导致这种情况(实际上它在 iOS6 中有效)。只是希望有人以前见过这个?
有任何想法吗?
更新 响应 cimmamon 的评论,代码如下:
<div class="col" style="left: -3920px; width: 280px;">
<div class="periods">
<div class="period3"></div>
<div class="period2"></div>
<div class="period1"></div>
<div class="nodeline colBk">
<div class="node colBrd"></div>
</div>
</div>
<div class="inner">
<div class="group first">
<div class="branch colBk"></div>
<a class="story">
<div class="strip colBk"></div>
<div class="caption">
<div class="text">
<p class="title">Test</p>
</div>
</div>
</a>
</div>
</div>
以及适用于“句点”容器和子项的 CSS:
.tls .col { display: inline-block; position: absolute; top: 0; }
.periods { height: 72px; overflow:hidden; position: relative; border-left: 1px solid #fff; }
.period2 { height: 30px; opacity: 0.6; background-color: #fff; position: absolute; width: 100%; }
.period1 { height: 25px; opacity: 0.72; top: 30px; background-color: #fff; position: absolute; width: 100%; }
.nodeline { height: 61px; }
.colBk { background-color: #dd545c; }
.nodeline { height: 61px; }
.node { position: absolute; margin-left: -15px; left: 50%; bottom: 0px; width: 17px; height: 17px; border-radius: 50%; border: 6px solid #dd545c; background-color: #f9f9f9; }
.colBrd { border-color: #dd545c; }
这是一个奇怪的错误——我可以看到 CSS 中没有任何东西可以导致这种情况。
关于我可以添加哪些 CSS 可能会强制它正确呈现的任何建议?您会认为仅身高就足够了,但显然不是。