내 CSS가 때때로 IE8에서 작동하며 다른 시간에 작동하지 않는 이유는 무엇입니까?

IE8에서 내 사이트의 CSS에 문제가 있습니다. 문제의 CSS는 class="error"으로 표시된 입력 요소 주위에 2 픽셀 적색 경계선을 그려야합니다. 페이지의 일부 입력 요소는 예상대로 작동하지만 다른 요소는 요소 주위에 2px의 흰색 테두리를 그립니다. 입력 요소에서 display: table-cell 속성을 제거하면 올바르게 작동합니다. CSS는 제가 시도한 다른 모든 브라우저 (FF3, Chrome, Opera)에서 예상대로 작동합니다.내 CSS가 때때로 IE8에서 작동하며 다른 시간에 작동하지 않는 이유는 무엇입니까?

작동중인 입력 요소와 작동하지 않는 요소 모두에 대해 아래의 IE8 개발자 도구 창에 표시된대로 페이지의 DOM 트리와 CSS의 관련 부분을 복사하여 붙여 넣었습니다. 나는 그들 사이의 차이점을 실제로 파악할 수 없다. 누구든지 도와 줄 수 있습니까?

감사합니다.

DOM 트리

<form> 
    <div class="table" id="contact_info"> 
     <div class="row" id="email"> 
      <label for="email_text"> 
       Text - E-Mail Address 
      Text - Empty Text Node 
     <!-- this input element doesn't show the correct border color --> 
      <input name="email" class="error" id="email_text" type="text" AUTOCOMPLETE="OFF" value="invalid address"/> 
      <label class="error" for="email_text" generated="true"> 
       Text - Please enter a valid e-mail address 
      Text - Empty Text Node 
     <div>... 
    <div class="table" id="security_info"> 
     <div class="row" id="password_conf"> 
      <label for="password_conf_text"> 
       Text - Re-type Your Password 
      Text - Empty Text Node 
     <!-- this input element does show the correct border color --> 
      <input name="password_conf" class="error" id="password_conf_text" type="password" value="nomatch"/> 
      <label class="error" for="password_conf_text" generated="true"> 
       Text - Please enter the same value again. 
      Text - Empty Text Node

** 입력 #의 EMAIL_TEXT (작동하지 않는) **에 대한 CSS

inherited - body 
    BODY 
     text-align: center 
     font-family: Arial, Helvetica, sans-serif 
     font-size: 12pt 
inherited - div 
    #container 
     text-align: left 
FORM .row > * 
    margin: 3px 0px 
    display: table-cell     // if I turn this off, then the borders work 
    vertical-align: top 
INPUT.error 
    border-bottom: red 2px solid 
    border-left: red 2px solid 
    border-top: red 2px solid 
    border-right: red 2px solid 
INPUT[type='text'] 
    font-family: Arial, Helvetica, sans-serif 
    font-size: 12pt 
INPUT[type='text'] 
    width: 175px

** 입력 #의 password_conf_text (작업)에 대한 CSS **

inherited - body 
    BODY 
     text-align: center 
     font-family: Arial, Helvetica, sans-serif 
     font-size: 12pt 
inherited - div 
    #container 
     text-align: left 
FORM .row > * 
    margin: 3px 0px 
    display: table-cell 
    vertical-align: top 
INPUT.error 
    border-bottom: red 2px solid 
    border-left: red 2px solid 
    border-top: red 2px solid 
    border-right: red 2px solid 
INPUT[type='text'] 
    font-family: Arial, Helvetica, sans-serif 
    font-size: 12pt 
INPUT[type='text'] 
    width: 175px

출처

2011-02-17 jay

제목 만 읽은 후에 "인터넷 익스플로러이기 때문에"라고 생각했습니다. – zzzzBov

나는 왜 모든 div 클래스 'table'과 'row'를 볼 때 테이블을 사용하지 않는지 궁금하다. –

각 속성의 줄 끝에 세미콜론이 없습니다. 시작과 끝에서 대괄호. 예 : form { border:none; color: #333 }

출처

2011-02-17 17:11:37 Rob

오, 이런 질문을 보았습니다. "IE8의 개발자 도구 창에서 볼 수 있듯이 페이지의 DOM 트리와 CSS의 관련 부분을 복사하여 붙여 넣었습니다."그래서 CSS를 포맷하는 방법은 아무 것도 없습니다 문제가있다. 이것은 실제 스타일 시트가 아닌 계산 된 스타일을 나열한 IE입니다. – BoltClock

@BoltClock - 문제가 아니라면 표준 "IE Sucks"에 대한 응답을 변경합니다. – Rob

오른쪽에 대한 소리! :) – BoltClock

을 사용해 보았습니까? FORM.error?

출처

2013-07-24 11:00:07

내 CSS가 때때로 IE8에서 작동하며 다른 시간에 작동하지 않는 이유는 무엇입니까?

답변

관련 문제