我一直在寻找解决这个问题的方法,但是直到现在我还没有找到任何解决方法。

我需要给视频一个绝对位置,它的大小会根据此位置而变化(通过提供上,右,下和左值)。当我这样做时,运行iOS 8+的iPhone上的播放按钮将停止居中。

这是正在发生的事情的打印:

Print screen from iPhone 5c

我已经能够在这里的JSFiddle上重现此错误:https://jsfiddle.net/hwgnzwzf/2/-似乎在设置“left”属性时开始发生。

<div class="video-holder">
    <div class="video">
        <div class="video-wrapper video-wide">
            <video controls poster="http://placehold.it/200x200">
                <source src="" type="video/mp4"/>
            </video>
        </div>
    </div>
</div>


.video{
    position: absolute;
    top:0;
    left:40%;
    right:20%;
    bottom:0;
}

/ edit:输入Doml后,我尝试仅设置“正确”值和“最大宽度”,但是最终结果是相同的。

最佳答案

问题是,iOS需要同时使用top和left这两个属性。底部/右,您只需将其设置为40%
将绝对容器“居中”的更好解决方案是将其放置在屏幕的中央,然后将其放回宽度的一半:

left:50%;
transform: translateX(-50%);

我没有iPhone,因此请告诉我这是否适合您

edit://哦,如果您想“调整大小”,只需为其添加一个最大宽度并删除“right”属性

09-10 09:05
查看更多