Derobins의 WMD에 몇 가지 문제가 있음

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

  •  19-09-2019
  •  | 
  •  

문제

Derobin의 WMD 편집기 구현에 작은 문제가 있습니다.

형식이 제대로 지정되지 않은 것 같고 그 이유를 완전히 모르겠습니다.Doctype에 이것을 물어봐야 할지 말아야 할지 잘 모르겠습니다.

나는 SO 참조의 마크다운 텍스트 예제를 사용하고 있었는데, 물론 아래와 같아야 합니다.

  1. 목록 항목의 목록:
    • 공백 4개를 들여썼습니다.
      • 8칸 들여쓰기.
    • 다시 4칸.

  2. 목록 항목의 여러 단락:3 개로 도망 갈 수있는 4 개의 공간을 들여 보내는 것이 가장 좋습니다. 그러나 다른 것들을 둥지하면 혼란 스러울 수 있습니다.4개를 고수하세요.

    우리는 첫 번째 줄 에이 단락과 일치 할 여분의 공간을 들여 내 렸습니다.실제로 사용하면 모든 항목이 정렬되도록 전체 목록에이를 수행 할 수 있습니다.

    이 단락은 여전히 ​​목록 항목의 일부이지만 사람에게는 지저분해 보입니다.따라서 처음 두 단락에서 했던 것처럼 중첩된 단락을 수동으로 래핑하는 것이 좋습니다.

  3. 목록 항목의 인용 부호:

선을 건너 뛰고> 4 개의 공간을 들여 보내십시오.

  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