景象形容：
车机上是深色背景模式，应用 richtext 包裹网页内容时，呈现红色背景边框，影响整体深色背景，问题截图如下：
问题代码：
<richtext type="html" class="rich-text">{{content}}</richtext>
<script>
export default {
private: {
content:
<body style="background-color: #006000;">
<div class="item-content" style="background-color: #006000;">
<style>h1{color: yellow;}</style>
<p class="item-title">h1</p>
<h1> 文本测试 </h1>
<p class="item-title">h2</p>
<h2> 文本测试 </h2>
</div>
</body>
},
}
</script>
<style>
.rich-text {background-color: #cd853f;}
</style> 问题剖析：
车机上在应用 richtext 组件包裹 html 内容后，在快利用里通过 class 设置 background-color 是不失效的。如果 richtext 包裹的内容只含网页的 body 局部，即便在 body 上设置了背景色，在展现富文本时四周也会呈现一圈红色边框。须要在 richtext 里写残缺的 html，且在其 html 标签上设置背景色，背景色在展现时能力笼罩边框，不会呈现红色的空隙。
解决办法：
在 richtext 里包裹一个残缺的 html 格局的网页，html 标签中设置背景色。
<richtext type="html" class="rich-text">{{content}}</richtext>
<script>
export default {
private: {
content:
`<!DOCTYPE html>
<html lang="en" style="background-color: #006000;">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="item-content">
<style>h1{color: yellow;}</style>
<p class="item-title">h1</p>
<h1> 文本测试 </h1>
<p class="item-title">h2</p>
<h2> 文本测试 </h2>
</div>
</body>
</html>`
},
}
</script>
<style>
.rich-text {background-color: #cd853f;}
</style>批改后效果图如下：
原文链接：https://developer.huawei.com/…
原作者：Mayism