、 、 标签的 HTML 呈现不一致答案

【问题标题】：Inconsistency in HTML rendering for , , tags 、 、 标签的 HTML 呈现不一致
【发布时间】：2017-07-13 08:16:15
【问题描述】：

我在数据库中保存了 HTML 结构，该结构在我的文本编辑器中呈现。和下面的类似：

<div>
    <b>
        <u>
            <i>
                This is sample text
            </i>
        </u>
    </b>
</div>

我发现这种不一致的地方有时会在 HTML 上方呈现为

 <div>
     <u style="font-weight: bold; font-style: italic;" >
          This is sample text
     </u>
</div>

这种不一致的行为会影响进一步的代码。

我想知道为什么 DOM 会受到不确定性的操纵以及如何避免这种情况？

【问题讨论】：

您正在查看默认浏览器样式。从历史上看，它们被用于样式内容，很像 center 元素，所以一些浏览器仍然添加斜体 (i)、粗体 (b) 和下划线 (u)。 --- 虽然我没有关于哪些浏览器仍然这样做的数据。
我正在使用 Chrome V.59 浏览器仅使用呈现它，但有时标签会转换为内联样式。
太棒了。 -- 当你说存在“不一致”时，哪些浏览器不像上面的例子那样设置 b/i/u 样式？
我通过传递 HTML，它被分配为 innerHTML。但是浏览器不会按原样处理给定的输入，而是将它们转换为样式元素。我想知道是否有任何方法可以防止这种情况发生。
这是一个非常不同的问题。也许关闭这个，然后问那个作为新的？

标签： javascript html dom rendering

【解决方案1】：

您有第三方软件在弄乱您的标记，无论您如何看待它，这都不是很好的软件行为。

为了防止这种情况发生，我很想交换：

<div>
    <b>
        <u>
            <i>
                This is sample text
            </i>
        </u>
    </b>
</div>

为：

CSS：

.bold {font-weight: bold;}
.underline {text-decoration: underline;}
.italic {font-style: italic;}

HTML：

<div>
    <span class="bold">
        <span class="underline>
            <span class="italic">
                This is sample text
            </span>
        </span>
    </span>
</div>

【讨论】：