CSS变换：翻译不工作在iPad

我做了网站正在建设中具有图像和类似以下页面的正中一些文本的简单：CSS变换：翻译不工作在iPad

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%);未应用于容器。解决这个问题有哪些选择？任何指导或反馈都比欢迎。

来源

2014-10-01 MariusNV

小心分享截图吗？ :) – Rvervuurt 2014-10-01 07:56:59

@Rvervuurt [链接]（http://i.imgur.com/yHvcA0n.jpg）：D – MariusNV 2014-10-01 08:01:52

Himanshu更快（我还在尝试）。他的解决方案可行 – Rvervuurt 2014-10-01 08:09:34

转换属性是基于浏览器的属性设置-webkit-变换，-moz-变换，-o变换.... ANS所以设置根据您的I-垫浏览器我这一点，就能解决问题

或者只是使用

margin-left:-50%; 

margin-top:-50%;

来源

2014-10-01 08:03:06 himanshu

我可以证实这个作品。 http://jsfiddle.net/z2j0hmr5/（在我的iPad上打开它）虽然你可能想要做一些重新定位。 – Rvervuurt 2014-10-01 08:08:44

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

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

应该做的伎俩。

供参考看看here

来源

2014-10-01 08:12:05 robjez

CSS变换：翻译不工作在iPad

回答

相关问题