德罗宾斯的大规模杀伤性武器有几个问题

StackOverflow https://stackoverflow.com/questions/1524792

  •  19-09-2019
  •  | 
  •  

题

我对 Derobin 的 WMD 编辑器实现有一个小问题。

它似乎没有正确格式化，我也不完全确定为什么。虽然我不确定我是否应该在 Doctype 上问这个问题。

我使用的是 SO 参考中的 markdown 文本示例，它当然应该如下所示：

  1. 列表项中的列表：
    • 缩进四个空格。
      • 缩进八个空格。
    • 又是四个空格。

  2. 列表项中的多个段落：最好缩小您可以逃脱三个空间的段落，但是当您嵌套其他东西时，它会令人困惑。坚持四个。

    我们将第一行的额外空间与这些段落保持一致。实际使用时，我们可能会将其执行到整个列表中，以使所有项目对齐。

    该段落仍然是列表项的一部分，但对人类来说看起来很混乱。因此，像我们对前两个段落所做的那样，手动包装嵌套段落是个好主意。

  3. 列表项中的块引用：

跳过一条线，缩进>>的四个空间。

  1. 列表项中的预格式化文本：

    Skip a line and indent eight spaces.
That's four spaces for the list
and four to trigger the code block.

然而，我得到的看起来像这样：

Example of issue

我认为这与 CSS 相关，但我看不出是什么原因造成的。如果需要，我可以发布 CSS，但我可能会发布所有 CSS，因为我不确定是什么原因造成的。但是，我不确定它是否可能是实际的脚本本身（我觉得这很可疑，因为示例有效并且我只是复制了相同的代码）。

我还应该指出，下载 WMD 附带的示例本身运行良好，但是一旦我将其添加到我的应用程序中，就会发生上述情况。

我还应该补充一点，这个问题在 IE7/8 和 Firefox 3.5 中仍然存在。

任何帮助深表感谢。

编辑： 通过为列表样式位置的 ol 和 ul 添加 CSS 样式，解决了出现在框外的项目符号/数字：里面;但其余部分仍然保持不变。

编辑： 根据用户评论进行编辑。输出的 HTML 是：

<ol>
<li>Lists in a list item:
<ul><li>Indented four spaces.
<ul><li>indented eight spaces.</li></ul></li>
<li>Four spaces again.</li></ul></li>
<li><p>Multiple paragraphs in a list items:
It's best to indent the paragraphs four spaces
You can get away with three, but it can get
confusing when you nest other things.
Stick to four.</p>

<p>We indented the first line an extra space to align
it with these paragraphs.  In real use, we might do
that to the entire list so that all items line up.</p>

<p>This paragraph is still part of the list item, but it looks messy to humans. So it's a good idea to wrap your nested paragraphs manually, as we did with the first two.</p></li>
<li><p>Blockquotes in a list item:</p></li>
</ol>

<blockquote>
<p>Skip a line and
indent the >'s four spaces.</p>
</blockquote>

<ol>
<li><p>Preformatted text in a list item:</p>

<pre><code>Skip a line and indent eight spaces.
That's four spaces for the list
and four to trigger the code block.
</code></pre></li>
</ol>
有帮助吗？

解决方案

在你的 css 文件中你有这个：

* {
    margin:0;
    padding:0;
}

这是一个通用重置，可以删除所有内容的填充和边距。正如我在 Doctype.com 上所说的。

您需要删除它，并使用更可控的重置，或者 一般为 ul 和 li 设置一些默认的填充和边距。

由于每个浏览器似乎对 ul 有不同的默认设置，因此我倾向于在重置中忽略它们并专门设置 nav ul。

这是我使用的重置：

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }

它重置了除列表之外的几乎所有内容。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top