IE7 : 텍스트 영역의 양식에 과도한 여백

내 응용 프로그램에서 IE7 버그를 처리하려고합니다. 다음은 HTML/CSS 코드를 파이어 폭스/오페라/웹킷/IE6에서IE7 : 텍스트 영역의 양식에 과도한 여백

<div style="margin-left: 320px"> 
    <form method="post" action=""><fieldset> 
     <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" 
        style="margin: 0; padding: 0"></textarea> 
    </fieldset></form> 
</div>

이 괜찮에게,하지만 IE7에서 텍스트 영역은 100 픽셀이 왼쪽 여백이있다. 누구든지이 문제를 해결할 수있는 팁을 가지고 있으면 감사합니다. 완전히 이상한

http://daneel.net/pub/img/ie7_bug_decalage.jpg

출처

2009-02-09 Cédric Girard

어떤 doctype을 사용합니까? – mbillard

: 여기

이 샘플 HTML을 표시 IE7의 스크린 샷이다. 나는 실제로 iep7에서 320px (부모 div 마진)를 얻는다.

당신은 부정적인 여백 IE7로 덮어 쓸 수 있습니다,하지만 그건 끔찍한 ...

편집 :이 작품 왜 OK, 나도 몰라,하지만 작동합니다. >

<div style="margin-left: 320px; display:inline-block;"> 
    <form method="post" action=""><fieldset> 
     <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" 
        style="margin: 0; padding: 0"></textarea> 
    </fieldset></form> 
</div>

출처

2009-02-09 11:10:56 yoavf

** 디스플레이 : 인라인 블록; ** – mbillard

이 < FIELDSET에 대한 IE의 기본 스타일 버그 것 같다 :이 defintely 버그입니다. 내 생각 엔 내부적으로 IE는 float 코드를 사용하고 악명 높은 Double-margin bug을 사용하여 필드 세트를 스타일링합니다.

나는 래퍼 < div>를 < fieldset> 안에 직접 넣어 버그를 물리 칠 수있었습니다.

출처

2009-02-09 15:09:30 bobince

이것은 상속 된 여백 버그와 유사합니다 (float의 이중 여백 버그와 유사하지만 다르다). 텍스트 영역은 양식 주위의 div에서 여백을 상속합니다. Position Is Everything describes it in more detail.

실제적인 해결 방법은 다음과 같습니다

가 (만 분명 IE에 대한) 텍스트 영역을 -320px의 부정적인 왼쪽 여백을 지정합니다.
텍스트 영역 앞에 있지만 필드 세트 안에 인라인 요소를 넣으십시오. 표시 할 스타일을 설정할 수있는 것처럼 보입니다 : none이지만 요소는 비워 둘 수 없습니다.
레이아웃을 제공하는 스타일 규칙이없는 한 div/span/any-other 태그의 텍스트 영역을 감싸십시오. 실제로 양식이나 필드 세트로 인해 문제가 해결 될 것이라고 생각 했겠지만 외관상으로는 '티).

출처

2009-02-09 16:52:12

다른 (또한 끔찍한) 솔루션은 ... 단지 <textarea> 앞에 을  를 추가하는 것입니다하지만 IMHO, 난 화재의 경우와 drity 솔루션 ... 화재와 더러운 IE의 버그를 싸움으로 확인 해요 당신은 ...;)

출처

2011-09-02 10:39:50 Andrej

에 조금 중점을두고 싶을 수도 있습니다. , 이것은 간단한 수정으로 XP에 붙어있는 불쌍한 영혼의 공간을 보여줍니다. – Jake1164

IE7 : 텍스트 영역의 양식에 과도한 여백

답변

관련 문제