Question

我在网站标题中使用此代码：

<!DOCYTYPE>
<html>
<head>
<style>
#image_header   {
    border-radius:20px;
    user-drag:none;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-drag:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    height:100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
}
#header_image   {
    width:100%;
    height:150px;
    overflow:hidden;
    position:relative;
    border-radius:30px;
}
</style>
</head>
<body>
<div id="header_image"><a href="/"><img id="image_header" src="http://static.adzerk.net/Advertisers/78e105390cf2426896c5fc38ae85a4f6.png"></a></div>
</body>
</html>

当浏览器窗口小于图像时，该代码会在左右两侧剪切标题图像。

我在几个设备和系统上进行了测试，并且它运行良好。

在运行最新版本6.1.6的iPhone 3GS上只有糟糕的显示。这就是它的样子：

有人知道为什么会这样吗？我该如何解决？

Answer 1

问题可能在于使用CSS的转换。你可以在这里查看： http://caniuse.com/#feat=transforms2d

由于它是3Gs iPhone，我想你确实会检查浏览器的支持。

尝试添加前缀 -webkit-transform：translateX（-50％）否则更改使用位置为transformationbackground-position：center;

iPhone 3GS上显示错误的标题

1 个答案: