2014-11-13 3 views
1
다른

보이는사업부 텍스트 내가 두 개의 유사한 코드가

<button id="steambutton" class="button">Get Phishers</button> 
    <div id="steamdiv"> 
    <h1 class="loadingtext"> 
     <span>L</span> 
     <span>o</span> 
     <span>a</span> 
     <span>d</span> 
     <span>i</span> 
     <span>n</span> 
     <span>g</span> 
    </h1> 
</div> 

이제 첫 번째 텍스트를 반환합니다,하지만 간격이 매우이다 작은. 두 번째 텍스트는 동일한 텍스트를 반환하지만 간격은 훨씬 큽니다. 동일한 브라우저에서 두 코드를 모두 사용했으며 간격이 완전히 다릅니다. 왜 이런 일이 일어나는 걸까요?

loadingtexthere에서 사용 된 CSS로만 작성된 맞춤 로딩 화면입니다.

+0

어떤 브라우저 ?? 'className'을 설정하기 전에'innerHtml'을 설정하면 같은 결과가됩니까? – cpacheco

+2

두번째 것은'span' 엘리먼트 사이에 공백을 가지고 있는데, 첫번째 것은 –

+0

@JamesThorpe 공백이 어디입니까? 보여주세요. –

답변

1

공백 때문일 수 있습니다. font-size:0h1에와주는 시도하여 span

h1 내부 데모에 font-size 원하는 : http://jsfiddle.net/GCu2D/412/

h1{font-size:0} 
h1 span{font-size:24px;} 

공백 문제를 처리하는 다른 방법도있다합니다. 다른 옵션을 위해 SO를 검색하십시오.

1

문제가 해결되었습니다. 제임스 덕분에, 나는 캐릭터에게 <span> 태그 각

\n 

을 추가하고이 문제를 해결했습니다.

모든 도움에 다시 한 번 감사드립니다!

관련 문제