Question

我正在使用gatsbyJS构建静态站点。我想有一个粘性的侧边栏。 position: sticky在Chrome和Firefox上工作正常，但是在Microsoft Edge 17上，边栏未显示。这是因为我的html标记中有一个dir="rtl" attr。我该怎么做才能使粘性元素的边缘带有rtl目录？

我的侧边栏组件嵌套在布局组件中，该组件使用引导程序来布局页面。我知道不同的可能的polyfill，并且我还编写了一些js，使其在position: fixed中看起来还不错。但是对于我在caniuse.com和其他地方看到的内容，它应该受到支持。所以我想知道我在做错什么，还是一个未被发现的错误。

这是我的代码。

sidebar.js：

const Sidebar ({ sidebarMenus }) => (
  <div id="sidebar" className="sidebar">
    <Menus menuList={sidebarMenus}/>
  </div>
)

sidebar.css：

.sidebar {
  display: none;
  position: -webkit-sticky;
          position: sticky;
  top: 20%;
  z-index: 1;
  margin-right: 35px;
  max-width: 155px;
}

@media only screen and (min-width: 770px) {
  .sidebar {
    display: block;
  }
}

pageLayout.js：

const PageLayout = (props) => (
  <div className="container">
    <div className="row">
      <div className="col col-12 col-md-9">
        {props.children}
      </div>
      <div className="col col-0 col-md-3">
        <Sidebar page={props.page}/>
      </div>
    </div>
  </div>
)

注意：除引导程序类外，布局没有其他CSS。

在边缘加载页面时，不会出现侧边栏。它在DOM中可见，我可以在开发工具中看到它的黏性，但未显示。仅在我将目录更改为默认ltr时显示。对此造成的任何帮助将不胜感激。

更新：显然是一个已知的错误：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15754013/

Answer 1

MS Edge中有一个错误，当html或body元素具有dir="rtl"属性时，它会阻止使用粘滞位置属性。查看https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15754013/上的讨论。
如此处所述，如果将dir="rtl" attr设置在正文的子元素上，则一切正常。
因此，解决方法非常简单：只需将dir="rtl"设置为任何容器div（或其他元素），即可将所有需要包装在rtl中的页面包装起来。
我希望这对某人有帮助。

在Microsoft Edge中，与dir“ rtl”属性结合使用时，粘性定位不起作用

1 个答案: