2011-01-25 6 views
21

잠시 동안 플로트 문제에 갇혀 있었기 때문에 커뮤니티에서 저를 다시 도울 수 있기를 바랍니다. 새로운 웹 양식 here이 있습니다. 늘 그렇듯이 IE7 (또는 IE8 호환성)에서는 모든 것이 정상적으로 보입니다.float : IE7에서 오른쪽으로 새 줄을 지어

일부 이유로 컨테이너의 일부가 양식 텍스트 아래의 새 줄에 양식 필드로 끝납니다. CSS가 내 장점이 아닙니다. 그렇지 않으면 확신 할 수 있습니다. 아무도 내가 여기에없는 것을 말해 줄 수 있습니까?

나는 플로트를 추가하려고 시도했다 : 폼 텍스트에 왼쪽으로 치우침으로써 완전히 다른 엉망으로 끝났다.

답변

75

는 작은 변화 마크 업을 시도 : 위 항목을 (같은 행에서)이없는 항목 전에 플로트와 함께. 도움이 될 것입니다.

+3

위대한 팁!기쁨. – orourkedd

+2

이것은 오늘 나에게 도움이되었다. 감사! –

+2

의미 상 올바르지 않습니다. 그렇지? – ciembor

0

텍스트의 스팬 태그를 고정 너비로 ​​만들고 왼쪽으로 띄우고 일치시키려는 입력 필드에도 동일하게 적용 할 수 있습니다. 또한 양식의 span 태그 대신 label 태그를 사용하는 것이 좋습니다. 진짜 단단한 이유가 없습니다. 라벨은 스팬 태그가 수행하는 것과 정확히 일치해야합니다.

0

당신이하고자하는 것은 분명히 추가하십시오 : 둘 다 떠 다니는 요소의 마지막 형제로.

그래서 같은 :

<div style="float:left;"> 
    <!-- children of div here --> 
</div> 
<div style="clear:both;"> 
    <!-- leave empty --> 
</div> 
1

왼쪽에 .formText을 플로팅하고 span.required을 플로팅 한 다음 입력을 그대로두면 동일한 줄에 줄을 표시 할 수 있습니다.

마크 업을 약간 수정합니다. 당신의 <span class="formText"> 정말 있어야 할 <label> 예를 들어

:

<P class=formRow> 
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label> 
<INPUT id=FirstName class=formTextbox name=FirstName> 
</P> 

과 CSS를 이런 식으로 뭔가 될 것이다 :

.formRow { 
    clear: both; 
} 
    .formRow label { 
    float: left; 
    width: 150px; 
    } 
    .formRow input { 
    float: left; 
    } 
2

내가이 게시 된 이후 오랜 시간이 지났 알고 있지만, 나는 이것을 위해 내가 좋아하는 해결책을 발견했다. 요점은 떠 다니는 요소를 DOM에서 부모의 첫 번째 요소로 이동하기 위해서만 IE7 용 CSS에서 '표현식'태그를 사용하고 있습니다. 다른 모든 브라우저에 대해서는 의미 상으로 올바르지 만 IE7에서는 DOM을 수정하여 부동 요소를 이동시킵니다. 내 경우

, 내가 가진 : IE7 내 <small>이의 첫 번째 요소로 이동하는 것을

.pull-right { 
    float:right; 
    *zoom: ~"expression(this.runtimeStyle.zoom='1',parentNode.insertBefore(this,parentNode.firstChild))"; 
} 

결과는 다음과 같습니다

풀 오른쪽에 대한 내 CSS에서
<div> 
    <h1></h1>...<p>any other content...</p> 
    <small class="pull-right"></small> 
</div> 

, 내가 사용하는 <div>하지만 다른 모든 브라우저는 마크 업 만 남겨 둡니다.

모든 사용자에게 적용되는 것은 아닙니다. 기술적으로 마크 업은 IE7 용 DOM에서만 수정되며 자바 스크립트 솔루션이기도합니다.

또한 성능 저하가있을 수 있음을 이해합니다. 느린 편이므로 이상적으로 많은 수레가 있습니다. 필자의 경우에는 제대로 작동하고 의미 론적으로 올바른 HTML을 유지할 수있었습니다.

관련 문제