translateX和overflow hidden不能按预期工作

时间：2017-02-03 00:22:48

标签： css3

这是我的WordPress入门主题：http://starter.devurl.net/

相关HTML：

<html>
    <body>
         <ul class="skiplinks">...</ul>
        <div id="site-wrap">
            <!-- content here -->
        </div>
    </body>
</html>

相关CSS：

body {
    direction: rtl;
    overflow-x: hidden;
}

#site-wrap {
    position: relative;
    min-height: 100%;
    transform: translateX(-250px);
}

在移动版中查看网站（在Chrome的Devtools中）。

正文已overflow-x: hidden; div＃site-wrap有transform: translateX(-250px);

据我所知，＃site-wrap假设向左移动并在右侧留下一个空白区域，而没有任何水平滚动到两侧。

请注意网站方向是 RTL ，但它不应该是一个问题，我希望保持这种方式而不在文档中的任何位置使用ltr。

谢谢！

1 个答案:

答案 0 :(得分：1)

根据我对移动设备的体验，由于他们呈现各种内容的方式，您有时需要解决html元素，以确保工作正常。

这就是三星Galaxy上看起来的样子（修复前）（我已添加元素边框以说明发生了什么）：

黑色：html元素 绿色：身体元素 红色：网站包装元素 蓝色：skiplinks元素

Diagnosis on BrowserStack 请注意，body和html实际上只是正确的250px。

添加：

html {
    overflow-x: hidden;
}

问题似乎已得到解决：

With HTML overflow-x hidden

我确信比我聪明的人能够解释原因！

相关问题
最新问题