CSS ID 选择器阻止所有内容在 Android 10 上的 Xamarin.Forms WebView 中显示

Question

我有一个 WebView，我将 HTML 片段分配给使用 HtmlWebViewSource 分配给 Source。

自从定位 Android 10 后，WebView 已停止显示所有内容。

我缩小了一个区分显示内容和不显示内容的字符。 HTML 包含一个 <style> 部分。如果它包含...

hello {}

...然后显示内容。好像它包含...

#hello {}

...然后没有内容显示。（hello 没有提到任何东西。）

显然，# 字符表示一个 Id 选择器。

那么，为什么基于 CSS 中如此简单的更改，定位 Android 10 突然让我的 HTML 停止显示？

我进一步缩小了范围。在 <head> 标签中...

<style>#</style> -> 没有 HTML 显示

<style></style> -> HTML 显示。

<style>.</style> -> HTML 显示。

我还在 Xamarin.Forms 4.

Answer 1

下面的代码对我有用。请检查。

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "hello" */
#hello {
  background-color: lightblue;
  color: black;
  padding: 30px;
  text-align: center;
}

/* Style all elements with the class name "Line" */
.Line {
  background-color: #9815B0;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<!-- An element with a unique id -->
<h1 id="hello">Page1</h1>

<!-- Multiple elements with same class -->
<h2 class="Line">Line1</h2>
<p>number 1.</p>

<h2 class="Line">Line2</h2>
<p>number 2.</p>

<h2 class="Line">Line3</h2>
<p>number 3.</p>

</body>
</html>

Answer 2

我解决了这个问题。我正在使用从 WebView 派生的 class 和自定义渲染器，它继承自...

ViewRenderer<MyWebView, Android.Webkit.WebView>

我不确定我为什么这样做。它至少使人们能够从相关的 class（处理 Javascript）引用渲染器上的方法，而不必将渲染器上的 Element 转换为自定义的 class 派生来自 WebView.

因此，我改为从标准 WebViewRenderer 继承自定义渲染器，并删除了创建本机控件并加载其 HTML 片段的代码，该片段现在已自动处理。自定义原生WebView和之前一样

我不知道为什么我不能再创建自己的原生 WebView 而不会遇到这个奇怪的错误。

CSS ID 选择器阻止所有内容在 Android 10 上的 Xamarin.Forms WebView 中显示

CSS Id selector stops all content from showing in Xamarin.Forms WebView on Android 10

android

webview

xamarin.forms