Question

我正在为我的登录页面添加一个响应按钮。该按钮的响应能力在其他移动设备上正常运行，但在IOS上却无法正常运行。在最初的调查中，我发现transform：translate（）在IOS中无法正常运行。

我已经在IOS的2种浏览器（Google Chrome和Safari）上进行了尝试。但是会发生同样的问题。

我也尝试添加-webkit-，但似乎都没有效果。

我还使用Bootstrap 4.2。

以下是我尝试做的事情的一个示例：

landing-btn {
    position: absolute;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    padding: 15px 40px;
    font-size: 3rem;
    line-height: 1.3333333;
}

<div class="container-fluid">
    <div class="text-center">
        <img class="img-fluid image-center hero-image" src="/assets/img/OPTIMIZEDWebBanner.jpg" alt="landing image">
        <button id="banner-storenow-homepage" type="button" class="btn btn-orange btn-lg landing-btn" onclick="document.location.href='/order/kahon/selection/';">Store Now</button>
    </div>
</div>

JS Fiddle Link

如示例代码所示，我尝试使用transform: translate(-50%);将按钮居中，按钮的位置偏离中心。它在右侧对齐过多。但它在Android设备上可以正常工作。

我希望它与Google Chrome（桌面）Inspect Element上显示的中心完全对齐。

Answer 1

您的CSS出现语法错误。您忘记添加“。”在您的班级名称之前

检查这个小提琴

fiddle goes here

.landing-btn {
 position: absolute;
 transform: translate(-50%);
 -webkit-transform: translate(-50%);
 padding: 15px 40px;
 font-size: 2rem;
 line-height: 1.3333333;
 left:50%;
 top:50%;
 }

.hero-image{
 object-fit: cover;
 height: 600px;
 }

CSS转换：在iOS上无法正确转换

1 个答案: