HTML 동적 태그 삽입이 정적 레이아웃과 다르게 보입니다.

jquery로 HTML 인터페이스를 프로그래밍합니다. 페이지에 편집 가능한 발행물 목록이 있으며 사용자가 모든 발행물을 클릭하여 세부 정보를 편집 할 수 있습니다. 데이터가있는 팝업 창이 나타나고 세부 정보 양식에 포함 된 작성자 목록이 있습니다. 그들 각각에 대한 편집/삭제 버튼 + "새로운 저자 추가"버튼이 있습니다. 사용자가 페이지를 다시로드하지 않고 작성자를 조작합니다. 새 작성자를 삽입 할 때 페이지에 동적으로 생성 된 &이라는 새로운 편집/삭제 버튼이 있습니다.HTML 동적 태그 삽입이 정적 레이아웃과 다르게 보입니다.

나는 다음과 같은 태그를 삽입 : 팝업 창이 나타나면 웹 서버에서 전송되는

<td class="author-actions"> 
    <img onclick='edit(id)' .../> 
    <img onclick='delete(id)' .../> 
</td>

그냥 동일한 HTML 레이아웃을. 하지만 어떻게 든 다르게 보입니다. 방화 광이 동일한 CSS 속성을 적용 했음에도 불구하고 이미지 사이에는 외부 공간이 있습니다.

IE로 마우스를 삽입 한 레이아웃으로 선택하면 어떻게 든 재정렬 할 수 있고 웹 서버에서 보내는 것과 같은 모양이 될 수 있습니다.

무엇이 될 수 있습니까?

출처

2010-05-05 Andrew Florko

저는 여러분의 문제는 IE와 파이어 폭스 (그리고 거의 모든 브라우저)가 기본 웹 페이지가 어떻게 보이는지에 관해서 다른 점이라고 생각합니다. 'CSS 재설정'페이지를 찾으십시오. 파일의 맨 위에있는 CSS 명령 집합으로, 처음에는 적용되고 후자의 규칙에 의해 지나치게 적용되어 페이지를 일관된 빈 상태로 유지합니다. – thecoshman

이미지를 "검사"하고 FireBug HTML 탭을보고 이미지를 둘러싼 요소를 확인하십시오. 불필요한 공백이 될 수 있습니다. –

네, 맞습니다. jquery (append.append)로 페이지를 구성하면 줄 바꿈이 없지만 정적 레이아웃에는 있습니다. –

이미지는 인라인 요소이며 단락의 단어와 같이 각 img 사이에 줄 바꿈이나 공백이 있으면 이미지 사이에 공백이 추가됩니다. 요소들 사이의 공백/줄 바꿈을 제거하여이 문제를 해결할 수 있습니다.

출처

2010-05-05 13:02:59 akamike

예, 정적 레이아웃에는 줄 바꿈이 있지만 jquery 생성 (.append.append ...)은 줄 바꿈이나 공백을 삽입하지 않습니다. –

하이퍼 링크 된 이미지가있는 경우 특히 현저합니다. 위의와

alt text http://img179.imageshack.us/img179/8580/blueunderline.png

<a href="http://www.google.com/"> 
    <img src="google_logo.png" width="32" height="32" border="0"/> 
</a>

, 자주 인해 폐쇄 </a> 전에 이미지 후 공백에 '추가 파란색 밑줄'효과를 얻을 수 있습니다.

이 문제는 단순히 공백을 제거하는 것입니다.

출처

2010-05-05 13:16:05 scunliffe

고맙습니다. 작동합니다! :) –

HTML 동적 태그 삽입이 정적 레이아웃과 다르게 보입니다.

답변

관련 문제