IE8에서 html이 동일하게 표시되지 않습니다.

'필수'텍스트가 입력 상자 왼쪽에 표시됩니다. Opera와 비슷한 문제는 다음 줄에 표시 (줄 바꿈을 만듭니다)입니다. FF3.1 및 크롬에서 예상대로 나타납니다. 어떤 제안? 결국 나는 display : none 속성을 'required'스팬에 사용하고 자바 스크립트에서 필요한만큼이 스팬을 보여주고 싶습니다.IE8에서 html이 동일하게 표시되지 않습니다.

<html> 
<head> 
<title></title> 

<style type="text/css"> 
<!-- 
input.missing { background-color: #FFFF77; } 

div.row { 
    clear: both; 
    padding-top: 5px; 
    } 

div.row span.label { 
    float: left; 
    width: 100px; 
    text-align: right; 
    } 

div.row span.formw { 
// float: right; 
    width: 235px; 
    text-align: left; 
    padding-right: 0px; 
    padding-left: 45px; 

    } 

div.spacer { 
    clear: both; 
} 

.container{ 
    width: 425px; 
    background-color: #ccc; 
    border: 1px dotted #333; 
    padding: 5px 5px 5px 5px; 
margin: 0px auto; 
} 

.error{ 
    color: #ff0000; 
    } 

.required{ 
    color: #ff0000; 
    float: right; 
// display:none; 
// display:inline; 
    } 
--> 
</style> 
</head> 
<body> 
<div id="contact_form"> 
<form action="/jr/index.php" method="POST" id="contact"> 

<div id="top_message" style="width: 360px; margin: 10px auto;"> 
Enter Your Information Below</div> 


<div class="container"> 

    <div class="row"> 
     <span class="label">Name:</span> 
     <span class="formw"><input size="30" maxlength="30" name="name" id="name" value=""></span> 
    </div> 

    <div class="row"> 
     <span class="label">Email:</span> 
     <span class="formw"><input size="30" maxlength="30" name="email" id="email" value=""></span> 
     <span id="email_error" class="required">(required)</span> 
    </div> 

    <div class="row"> 
     <span class="label">Shoe size:</span><span 
class="formw"><input type="text" size="25" /></span> 
    </div> 
    <div class="row"> 
     <span class="formw"> 
     <input type="image" value="submit" name="submit" class="button" src="submit.png" alt="Submit" /></span> 
    </div> 
    <div class="spacer"> 
    &nbsp; 
    </div> 

</div> 

<div id="message_ajax" style="width: 360px; margin: 10px auto;"></div>   

</form> 
</div> 
</body> 
</html>

IE는 내가 때때로 웹 개발자를 싫어하게 만듭니다.

출처

2009-12-16 jriggs

파일 상단에 적절한 DocType 태그를 추가해야합니다.

편집 : 코드를 살펴본 후에는 플로트를 제대로 사용하지 않는 것 같습니다. 먼저 off - //는 CSS 파일의 행을 주석 처리하지 않습니다. 그것을 주석으로 달려면 /* and */에 포장해야합니다. 그래서 SPAN.formw 스타일이 오른쪽으로 떠 다니고 있습니다. 이는 SPAN.required 앞에 있으며, 오른쪽으로도 떠 있습니다. SPAN 태그를 사용하고 있기 때문에 여기에 아무것도 플로팅 할 필요가 없습니다. 당신이 그 모두를 제거한다면 그것은 단지 당신을 위해 자리에 있어야합니다.

출처

2009-12-16 16:58:56

감사합니다, 즉 놀랍게도 고정보세요! 나는 과도기적 인 btw를 사용했다. – jriggs

그리 놀랍지도 않습니다;) doctype이 없으면 IE는 Quirks 모드로 실행됩니다.이 모드는 엉망입니다. –

좋은 점 ......... – AJM

어떤 doctype을 사용하고 있습니까? http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

출처

2009-12-16 16:59:29 Wookai

Meyer CSS Reset 파일에 대한 +1은 +1해야합니다. :) –

가 float를 넣어 : 엄격한 하나는 불만의 모든 종류의 없애 또한, 나는 보통 리셋 파일 내 CSS 디자인을 시작 ... 문제의 종류를 방지 할 수있다 formW 클래스에 남아

출처

2009-12-16 17:06:12 AJM

플로트 대신 부동 및 인라인 요소를 혼합의 왼쪽에있는 행의 모든 상자 :

div.row span.label { 
    float: left; 
    width: 100px; 
    text-align: right; 
    } 

div.row span.formw { 
    float: left; 
    width: 235px; 
    padding-left: 45px; 
    } 

.required{ 
    float: left; 
    color: #ff0000; 
    // display:none; 
    }

출처

2009-12-16 17:07:43 Guffa