2011-09-05 8 views
0

안녕하세요, 저는 CSS로 라벨을 만들었습니다. 레이블 CSS는 파이어 폭스, 크롬 잘 작동하지만 IE에서 실행하면 CSS가 제대로 나오지 않습니다. IE의 CSS 정렬

label.formInputField {width:119px; height:26px; margin:3px 0px 0 0; padding:11px 6px 0 6px; background: #dadada url('css-images/labelBG.png') 50% 50% repeat-x; float:left; display: block; font-size: 12px; font-weight: normal; line-height: 1.1; color:#333; text-align:right; border: 1px solid #AAAAAA; border-right: 1px solid #dadada; } 

.div_form_textbox { width:200px; float:left; text-align:left; background-color:#E6E6E6; height:29px; margin:3px 2px 0 0; padding:5px 0 3px 5px; border-right: 1px solid #AAAAAA;border-top: 1px solid #AAAAAA;border-bottom: 1px solid #AAAAAA; background: #e6e6e6 url('siva_images/form_input_bg.png') 50% 50% repeat-x;} 

.ui-corner-left { -webkit-border-bottom-left-radius :4px;-webkit-border-top-left-radius :4px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; } 
      .ui-corner-right { -webkit-border-bottom-right-radius :4px;-webkit-border-top-right-radius :4px;border-bottom-right-radius: 4px; border-top-right-radius: 4px; } 


<label class ="formInputField ui-corner-left" for="Pdoctor">Doctor First Name:</label> 
<div class="div_form_textbox ui-corner-right"> 
            <input id="fname" name="fname" type="text" size="30" class="textbox ui-corner-all"/> 
           </div> 

enter image description here

같은 모질라와 크롬의 적절한 출력 그래서 IE에서 같은 일이 같은오고있다 :

enter image description here

왼쪽 라벨과입니다 오른쪽 div 안에 텍스트 상자가 있습니다. 내 문제 그 중 절반만이 의사 이름의 레이블에 들어 있습니다. 이 문제를 해결할 수 있도록 도와주세요.

+1

JSFiddle의 IE에서 렌더링이 잘되었습니다 ... doctype을 설정 했습니까? –

+0

예 doctype이 Siva

답변

3

look at it in Quirks Mode 때 IE에서 정확한 동작을 얻습니다.

당신은 아마 같은, 가장 먼저 선으로 유효한 문서 타입을 추가해야합니다

<!DOCTYPE html> 

을 이미 다음 쿼크 모드에 대한 다른 가능한 이유가 있다는 것을있는 경우.

+0

으로 설정되었습니다. Siva

+1

@Siva를 제공 한 것과 비슷한 첫 번째 줄을 제공했습니다. "similar"라고 말하면 DOCTYPE 항목 어떻게 생겼어? 만약 * 약간 * 틀린 것이라면 아마도 quirks 모드가 될 것입니다. 그리고 확실히 페이지 첫 줄입니까? –

+0

@ 시바 : 내 페이지로 연결되는 링크를 사용할 수 있습니까? 그렇게하면 문제를 빨리 찾을 수 있습니다. – thirtydot

0

IE8 이하의 브라우저는 CSS3를 렌더링 할 수 없습니다. -webkit 명령. CSS 스타일에서 사용한 것과 같습니다 :

+1

실제로 IE 브라우저는 웹킷 브라우저가 아니기 때문에'-webkit' CSS를 렌더링하지 않습니다. 그러나 이것은 문서가 Quirks 모드로 렌더링된다는 점에서 OP가 가지는 문제를 해결하지 못합니다. – anothershrubery