Angular 轮播 - <li> 元素是否需要 "position: absolute"？

Question

我一直在努力让 rn-carousel 正常工作幻灯片 2+ 全部错位
...直到我偶然发现这个（看似无关的）问题：
https://github.com/revolunet/angular-carousel/issues/245

我添加了以下 class 使事情完美运行：

ul[rn-carousel] > li {
    color: black;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: visible;
    vertical-align: top;
    position: absolute;
    left: 0;
    right: 0;
    white-space: normal;
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
    height: 100%;
    display: inline-block; }

然后我继续消除所有 CSS 样式，直到找到解决问题的样式：

显然 "position: absolute" 是所有 <li> 元素上必需的 CSS 样式 ??

（相当有限的）文档中未提及任何内容...
- 我有什么地方有错误吗？
- 这是我不知道的标准 CSS 问题吗？
（有关信息，rn-carousel 指令会自动将 display: inline-block 添加到 <li>）

在以下版本范围内进行了尝试，结果相同：
- rn-carousel 版本 0.3.5 - 0.3.9
- angularjs 版本 1.3.0 - 1.3.12

Plunker

Answer 1

position: relative 在父容器 (ul) 和 position: absolute 在子容器 (li) 上是 angular-carousel 正常工作所必需的.

包括默认 angular-carousel.css 样式表会添加以下定义：

ul[rn-carousel] {
  //...
  position: relative;
  //...
  }

  ul[rn-carousel] > li {
    //...
    position: absolute;
    //...
    }

这不应干扰您需要对 li 的内容进行的任何自定义样式设置。如有必要，您可以将内容包装在 div 中，并将任何样式命名为该元素上的 class。

Angular 轮播 - <li> 元素是否需要 "position: absolute"？

Angular Carousel - is "position: absolute" required on <li> elements?

javascript

angularjs

angularjs-directive

angular-carousel

Plunker