Skip to content

发现CSS属性转义时丢失或者错误 #682

@changzhengithub

Description

@changzhengithub

使用环境

使用uniapp的cli方式创建的项目,通过引入dist下的uni-app文件里的组件实现的富文本展示。

问题描述

在渲染富文本内容时,发现有些CSS属性转义直接丢失或者转义错误。
1、给图片设置display: inline-block;转义时直接直接变成display: block;导致实现的行内样式未生效。
2、给某个元素设置display: flex;布局,某高度比较小的子元素设置align-self: flex-end;属性时,转义后属性直接丢失,导致这个高度比较低的元素被充满父元素。

复现方式

<section style="justify-content: flex-start; display: flex; flex-flow: row; position: static; box-sizing: border-box;"><section style="display: inline-block; vertical-align: bottom; width: auto; align-self: flex-end; flex: 0 0 auto; min-width: 5%; max-width: 100%; height: auto; border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden; background-color: rgb(255, 255, 255); padding: 5px 20px 0px; box-sizing: border-box;"><section style="justify-content: flex-start; display: flex; flex-flow: row; position: static; box-sizing: border-box;"><section style="display: inline-block; vertical-align: top; width: auto; align-self: flex-start; flex: 0 0 auto; min-width: 5%; max-width: 100%; height: auto; margin: 0px 0px 0px -10px; box-sizing: border-box;"><section style="text-align: center; margin-top: 10px; margin-bottom: 10px; line-height: 0; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 25px; height: auto; box-sizing: border-box;"><img class="newUrlClass" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" data-s="300,640" crossorigin="anonymous" src="/default/8af13959866c2ff3cb583a94a88b9231.gif" _src="/default/8af13959866c2ff3cb583a94a88b9231.gif"></section></section></section><section style="display: inline-block; vertical-align: top; width: auto; align-self: flex-start; flex: 0 0 auto; min-width: 5%; max-width: 100%; height: auto; margin: 0px; box-sizing: border-box;"><section style="text-align: center; margin: 0px 0px 10px; line-height: 0; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 25px; height: auto; box-sizing: border-box;"><img class="newUrlClass" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" data-s="300,640" crossorigin="anonymous" src="/default/e367c9dfb6ed7d2401ab8f91e8a222c8.gif" _src="/default/e367c9dfb6ed7d2401ab8f91e8a222c8.gif"></section></section></section><section style="display: inline-block; vertical-align: bottom; width: auto; align-self: flex-end; min-width: 5%; max-width: 100%; flex: 0 0 auto; height: auto; margin: 0px 0px 0px -22px; box-sizing: border-box;"><section style="text-align: justify; font-size: 19px; letter-spacing: 1px; box-sizing: border-box;"><p style="white-space: normal; margin: 0px; padding: 0px; box-sizing: border-box;"><strong style="box-sizing: border-box;">17可持续</strong></p></section></section></section></section><section style="display: inline-block; vertical-align: bottom; width: auto; background-color: rgb(255, 255, 255); flex: 0 0 0%; height: auto; align-self: flex-end; line-height: 0; box-sizing: border-box;"><section style="text-align: center; position: static; box-sizing: border-box;"><section class="group-empty" style="display: inline-block; width: 15px; height: 15px; vertical-align: top; overflow: hidden; border-bottom-left-radius: 100px; background-color: rgb(94, 130, 106); box-sizing: border-box;"><svg viewBox="0 0 1 1" style="float:left;line-height:0;width:0;vertical-align:top;"></svg></section></section></section><section style="display: inline-block; vertical-align: bottom; width: auto; flex: 100 100 0%; height: auto; align-self: flex-end; padding: 0px 8px 0px 0px; box-sizing: border-box;"><section style="justify-content: flex-start; display: flex; flex-flow: row; position: static; box-sizing: border-box;"><section style="display: inline-block; vertical-align: middle; width: auto; align-self: center; flex: 100 100 0%; height: auto; box-sizing: border-box;"><section style="margin: 0.5em 0px; position: static; box-sizing: border-box;"><section style="background-color: rgb(255, 255, 255); height: 1px; box-sizing: border-box;"><svg viewBox="0 0 1 1" style="float:left;line-height:0;width:0;vertical-align:top;"></svg></section></section></section><section style="display: inline-block; vertical-align: middle; width: auto; align-self: center; flex: 0 0 auto; min-width: 5%; max-width: 100%; height: auto; line-height: 0; padding: 0px 0px 0px 8px; box-sizing: border-box;"><section style="text-align: center; position: static; box-sizing: border-box;"><section class="group-empty" style="display: inline-block; width: 6px; height: 6px; vertical-align: top; overflow: hidden; border-width: 1px; border-radius: 100%; border-style: solid; border-color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0); box-sizing: border-box;"><svg viewBox="0 0 1 1" style="float:left;line-height:0;width:0;vertical-align:top;"></svg></section></section></section></section><section style="margin: 3px 0px 5px; position: static; box-sizing: border-box;"><section style="text-align: right; font-size: 11px; letter-spacing: 1px; font-family: PingFangSC-light; color: rgb(255, 255, 255); box-sizing: border-box;"><p style="text-align: left; margin: 0px; padding: 0px; box-sizing: border-box;">第62期&nbsp; &nbsp;【Sustainable Cities and Communities-04】<span style="box-sizing: border-box;"></span><span style="box-sizing: border-box;"></span><span style="box-sizing: border-box;"></span></p></section></section></section></section>

正常情况:
Image
渲染失效:

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions