Webkit 브라우저에서 Mozilla Firefox와 다른 CSS를 렌더링하는 이유는 무엇입니까?

Question

필자는 이미 마크 업 된 (일부 마크 업 변경을 한) 양식의 스타일을 지정하고 있으며 파이어 폭스에서 주로 스타일 작업을합니다. 따라서 방화 상자와 웹 개발자 도구 모음을 사용할 수 있습니다.

이 프로젝트에서는 웹킷 기반 브라우저 인 Chrome과 Safari의 특정 영역 (여러 요소)에서 파이어 폭스보다 내 스타일이 상당히 다르게 표시되는 것으로 나타났습니다 (인터넷 익스플로러에도 들지는 않습니다. 파이어 폭스 디스플레이 사이딩).

왜 스타일이 그렇게 다르게 표시되는지 알 수 없습니다. 일반적으로 나는 파이어 폭스가 당연히 받아들이지 않는다는 것을 무시하고 있으며, 다른 사람들은 그것을 명시 할 필요가 있다는 규칙이있다. 하지만 여기에 왜 이런 식으로 표시되는지 알 수는 없습니다. 특히 사용자가 연락처 정보를 입력하고 양식을 제출할 수있는 양식 하단 부분을 언급하고 있습니다. 불일치에 관해서는 스크린 샷을 첨부하겠습니다.

다음은 URL이므로 직접 확인하시기 바랍니다. 이것은 프로덕션 페이지 (이미 릴리스 됨)이므로 양식을 시험해 보면 CURE의 연락처 데이터베이스에 추가됩니다. 버튼을 alt text http://static.helpcurenow.org/images/test/chrome.jpg alt text http://static.helpcurenow.org/images/test/safari.jpg

제출 이상한 변화 -

파이어 폭스 (내가 보이게하려는 방법) alt text http://static.helpcurenow.org/images/test/firefox.jpg

크롬, 그리고 사파리 : 여기

http://www.helpcurenow.org/survey2010

는 스크린 샷입니다

보너스로, 누군가 IE7이 대기열 뒤에 배경을 표시하지 않으려 고하는 이유를 알아내는 데 도움이되고 싶다면 stions 만, 그리고 내가 많은 의무가있을 것이라고 고치는 방법!

대단히 감사합니다.

Answer 1

귀하의 <ol>이 닫혀 있지 않으므로 코드를 수정하기 위해 웹킷이 <fieldset> 안에 제출 버튼을 배치하게됩니다.

Answer 2

browser reset css을 사용하셨습니까? 브라우저마다 다양한 요소에 대한 기본 스타일이 다르지만 재설정 CSS는 모든 기본 스타일을 재설정하여 모든 브라우저에서 유사하게 보입니다.

Answer 3

FF와 Webkit 브라우저에는 몇 가지 차이점이 있습니다. 특히 양식과 관련하여 필자도이 문제를 경험했습니다.

CSS Browser Selector 스크립트를 사용하여 두 개의 브라우저를 타겟팅하도록 내 CSS를 분할하여 해결했습니다. 일한 경이로움, Webkit에서 다른 것을 설정하고 모든 것을 고쳤습니다.

게시 할 실제 예제가 있거나 소스 코드가 있습니까? 그렇다면 IE7 문제에 대해 더 많은 도움을 줄 수 있습니까?

희망이 있습니다.

편집 :

<ol> 

      <li class="contact-info"> 
       <label class="field-required" for="first_name">First Name</label> 
       <input type="text" size="35" maxlength="250" name="first_name" value="" id="first_name" /> 
      </li> 

      <li class="contact-info"> 
       <label class="field-required" for="last_name">Last Name</label> 
       <input type="text" size="35" maxlength="250" name="last_name" value="" id="last_name" /> 
      </li> 

      <li class="contact-info"> 
       <label class="field-required" for="email_address">Email Address</label> 
       <input type="text" size="35" maxlength="100" name="email_address" value="" id="email_address" /> 
      </li> 

     </fieldset> 

     <!--TransactionFields section end--> 
     <script language="JavaScript" type="text/javascript"> 
     ... 
     </script> 

     <div class="button-row"> 
      <input type="button" name="SubmitButton" id="SubmitButton" value="Submit" onclick="SubmitForm425952(form);" class='HtmlButton' /> 
     </div> 

    </form> 
    <!--form javascript--> 
    <script language="JavaScript"> 
    ... 
    </script> 

NO OL 


</div></td></tr> 
</table> 


    </div> 
    <!--End Featured Content--> 

귀하의 <ol> 두 번째 스크립트 태그 후 종료되지 않았습니다.

Answer 4

-moz 특정 CSS 규칙을 잊어 버렸을 수 있습니다.예를 들어

는 - 또한 웹 인스펙터라는 방화범 같은 도구를 가지고 박스 크기는 -moz-상자 크기 조정