如何使Android WebView不忽略'height'CSS属性？

Question

我正在尝试制作一些小圆圈指示器，类似于您通常会在幻灯片轮播底部看到的圆圈指示器，以指示该幻灯片在哪个幻灯片上。到目前为止，我在此JS小提琴中是：http : //jsfiddle.net/LSmSS/。

这是HTML：

<ul class="carousel-indicators">
    <li></li>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

和CSS：

.carousel-indicators {
  position: absolute;
  bottom: 5px;
  left: 50%;
  z-index: 15;
  width: 100px;
  margin: 0 0 0 -50px;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 2px;
  margin-right: 2px;
  text-indent: -999px;
  border: 1px solid #333;
  background-color: #333;
  border-radius: 5px;
  cursor: pointer;
}
.carousel-indicators .active {
  background-color: white;
}

这似乎适用于大多数浏览器，包括默认的Android浏览器：

但是在Android WebView中，圆圈显示为细线，并且似乎忽略了height属性：

我已经在Android 2.3、4.0和4.1上尝试过此方法，但结果相同。

我的CSS出问题了，还是Android渲染器只是垃圾？如果是后者，是否有CSS专家知道如何设置<ul>的样式，使其可以在Android WebView中正确显示？我当然不关心Android搞砸的所有其他JSFiddle东西，只是那些小圈子。实际上，我什至不关心它们是否是圆形...如果有人能够弄清楚如何使其不忽略我的height属性，而只是显示一些小方块或类似的东西，我也会对此感到满意。:)

编辑：我也尝试过在<ul>上放置一个'height'属性，而不仅仅是<li>，但是android渲染器仍然忽略它...

Answer 1

我和你有同样的问题，我只是找到原因了。也许你可以尝试我做的事情。

刚刚设置：

webSettings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);

可能是LayoutAlgorithm.SINGLE_COLUMN造成问题的原因。

在文档参考中，SINGLE_COLUMN也标记为“已弃用”。