如何让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专家知道我如何设计我的＆lt; ul＆gt;这样它会在Android WebView中正确显示？当然，我并不关心Android搞砸了的所有其他JSFiddle内容，只关注小圈子。事实上，我甚至不关心它们是否是圆圈......如果有人能弄清楚如何制作它不要忽略我的身高属性而只是展示一些小方块，或者其他东西，我会也很高兴。 ：）

的修改： 我还尝试在＆lt; ul＆gt;上添加'height'属性，而不仅仅是＆lt; li＆gt;，但Android渲染器仍然忽略它...

Answer 1

我遇到了和你一样的问题，我找到了原因。也许你可以尝试我所做的。

刚设置：

webSettings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);

可能导致问题的是LayoutAlgorithm.SINGLE_COLUMN。

对文档的引用，SINGLE_COLUMN也标记为不推荐使用。