如何使 Android WebView 不忽略“高度”css 属性？

Question

我正在尝试制作一些类似于您通常在幻灯片轮播底部看到的小圆圈指示器，以指示它位于哪张幻灯片上。到目前为止，我在这个 JS Fiddle 中得到了什么：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 专家知道如何设置我的

样式以使其在 Android WebView 中正确显示？当然，我不关心 Android 搞砸的所有其他 JSFiddle 东西，只关心小圆圈。事实上，我什至不在乎它们是否是圆圈......如果有人能弄清楚如何让它不忽略我的高度属性并且只显示一些小方块或其他东西，我会对此也感到高兴。 :)


编辑： 我还尝试在

上放置一个“高度”属性，而不仅仅是
• ，但 android 渲染器仍然忽略它...

Answer 1

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

刚刚设置：

webSettings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);

也许是 LayoutAlgorithm.SINGLE_COLUMN 导致了问题。

对文档的引用，SINGLE_COLUMN 也被标记为 Deprecated。