自从在多个iPhone和iPad上升级到iOS 7之后,我们在网站上看到了一些非常奇怪的UI.
附加图片中的粉红色盒子位于绝对定位的父母中,它有两个绝对位于其中的白色div,每个都具有不同的不透明度.粉红色的圆圈只是一个具有边框半径的div,使其成为一个圆.在这个布局中完全没有图像.
由于某种原因,浏览器间断地延伸了粉红色的div,但是我不能想到会导致它的任何东西 – 如果我想要的话,我不知道如何实现这个效果！
我没有包括任何代码,因为它真的很简单,没有什么会导致这一点(实际上它在iOS6中).只是希望有人以前见过这个？
有任何想法吗？
The CSS problem http://i41.tinypic.com/264289i.png
<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可以添加的任何建议可能会迫使它呈现正确？你会认为高度只有足够,但显然不是.
解决方法
我有这个问题,现在也在Safari 7中.
这是我案例中发生的一个简化版本
HTML
<ul>
<li>
<a> Some text </a>
</li>
<li>
<a> Some other text </a>
</li>
</ul>
然后我有一些javascript(在我的情况下是引导工具提示),它在添加了html的元素中
<ul>
<li>
<a> Some text </a>
<div style="position: absolute" class="tooltip"> Some content here </div>
</li>
<li>
<a> Some other text </a>
</li>
</ul>
新的div在简短的显示之前,整个ul将被拉伸到新的div的顶部.
这必须是Safari中的错误,但是将以下CSS添加到插入的div中可以作为解决方法.
.tooltip {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
这将强制插入的div被渲染在一个新的复合层中,这似乎阻止了Safari的修复.
希望这足够让你达成一个解决方案,但让我知道,如果不是,我可以更多地说出这个答案.
