Question

注意：此问题只能在IE 11中看到。 IE Edge（包括仿真）不会显示问题。

当我将md-tabs与md-sidenav结合使用时，我遇到了一个疯狂的问题。这是傻瓜：

http://embed.plnkr.co/if7VqrZoFKBJt4lAAoy0/

  <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">

      <md-toolbar class="md-theme-light">
        <h1 class="md-toolbar-tools">Sidenav Right</h1>
      </md-toolbar>
      <md-content layout-padding="">
        <md-tabs>
          <md-tab label="Tab #1"></md-tab>
          <md-tab label="Tab #2"></md-tab>
          <md-tab label="Tab #3"></md-tab>
        </md-tabs>
      </md-content>

    </md-sidenav>

我复制了2个sidenavs：一个使用了班级md-sidenav-left，另一个使用了md-sidenav-right。正确的选项不允许选项卡或任何内容与之交互。

示例和我的实际代码使用0.11.4，但我也测试了1.0，它也有同样的问题。

有没有人遇到过这个问题？ “材质”网站上的示例工作正常，但不使用制表符。我认为它是translate3d css问题，但无法确认。

Answer 1

原来他们的css试图捎带md-sidenav-left而不是创造一种新风格。

这是固定的Plunker：

http://embed.plnkr.co/7L6GuUH036F2W9i7JPwl/

以下是构建中的原始SCSS：

.md-sidenav-right {
  left: 100%;
  top: 0;
  transform: translate3d(-100%, 0, 0);
  &.md-closed {
    transform: translate3d(0%, 0, 0);
  }
}

结果是{p> translate3d和left: 100%。它存在的原因是创建正确的动画。

以下是更正的SCSS：

.md-sidenav-right {
  left: inherit;
  right: 0;
  transform: translate3d(0,0,0);
  &.md-closed {
    transform: translate3d(100%,0,0);
  } 
}

Angular Material：Md-sidenav-right，md-tabs在IE中不起作用

1 个答案: