Question

我制作了一个简单的在建网站，其中有一个图像和一些文本位于页面中间，如下所示：

HTML代码：

<body>
    <div id="container">
        <span id="wip">Under Construction</span>
        <img id="image" src="katte.jpg">
        <span id="text">Glæd dig, her åbner katteboxen.dk i foråret 2015. Vi glæder os til at forkæle din kat med en spændende pakke hver måned.</span>
    </div>
</body>

CSS代码：

body {
    margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    text-align: center;
}
#container {
    max-width: 1230px;
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#image {
    width: 100%;
}
#text {
    font-size: 20px;
    padding: 0 15px;
    display: block;
}
#wip {
    font-size: 40px;
    padding: 0 15px;
    display: block;
}

链接：http://katteboxen.dk/

除了iPad之外，一切都很好。内容显示为例如css规则transform: translate(-50%, -50%);未应用于容器时。解决此问题有哪些替代方案？任何指导或反馈都受到欢迎。

Answer 1

您可能需要为transform属性尝试浏览器特定的前缀，所以：

-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

应该这样做。

供参考，看看here

Answer 2

转换属性是基于浏览器的属性集-webkit-transform，-moz-transform，-o-transform .... ans所以根据你的i-pad浏览器设置它这将解决问题

或只是使用

margin-left:-50%;

margin-top:-50%;

CSS转换：翻译不适用于iPad

2 个答案: