html - 不能处理
所见即所得编辑器中的标记

Question

这<p>是大多数所见即所得编辑器（我使用 tinymce）中内容的默认根元素，其中不能<p>包含块元素。当我的内容只是一个表时，页面源和呈现的元素之间存在差异：

页面来源：

   <div class="generalbox">
   <p>
   <table><tr><td>something</td></tr><table>
   </p>
   </div>

检查元素（在 Chrome 和 Mozilla Firefox 中）：

    <p></p>
    <div class="generalbox">
    <table><tr><td>something</td></tr><table>
    </div>
    <p></p>

这会导致内容前后出现空白。我使用以下 css 规则来省略间隙效果，但显然没有成功：

.generalbox  p:first-of-type {
    margin-top:0;
}

.generalbox  p:last-of-type {
    margin-bottom:0;
}

我应该如何消除间隙效应？CSS或服务器端代码或什么是所见即所得？

score 1 · Accepted Answer

使用:empty选择器来定位那些所见即所得的空p元素：

p:empty {
  margin: 0;
}

您还可以结合使用:not()以选择非空p元素：

p:not(:empty) { }

score 0 · Accepted Answer

TinyMCE 有一个可用的插件，允许您编辑输出的代码。您可以使用该选项吗？如果没有，试试这个：

.generalbox {
    margin-top: -10px;
}

.generalbox + p {
    margin-bottom:0;
}

html - 不能处理所见即所得编辑器中的标记