Firefox는 OS에 따라 다른 기본 제공 스타일 시트를 사용합니까?

여기 아주 간단한 HTML 문서입니다 :Firefox는 OS에 따라 다른 기본 제공 스타일 시트를 사용합니까?

<!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 
.MyInputClass {position: absolute; left:32px; top:64px; width:119px; height:19px; padding: 0; font-weight: normal; font-style: normal; text-decoration: none; font-size: 13px; text-align:left;} 
.MySelectClass {position: absolute; left:159px; top:64px; width:121px; height:21px; padding: 0; font-weight: normal; font-style: normal; text-decoration: none; font-size: 13px; } 
</style> 
</head> 
<body> 
<input class="MyInputClass" type="TEXT" id="MyEdit"> 
<select class="MySelectClass" id="MySelect" ></select> 
</body> 
</html>

이 내가 사용하고 실제 HTML 아니지만, 데모 용입니다.

http://imgur.com/GIaAycv

, 윈도우 7에서 점에 유의 INPUT의 시각적 높이와 선택하세요 : 파이어 폭스의 모든 버전을 사용 는 (24.0-13.0에서)이 내가 (imgur.com에 이미지 링크) 무엇을 얻을 요소가 일치하지만 Windows XP에서는 INPUT 요소의 높이가 SELECT보다 2 픽셀 더 큽니다.

파이어 버그를 사용하면 파이어 폭스가 Windows XP에서는 border-width = 2px를 사용하고 Windows 7에서는 1px 만 사용하고 있음을 발견 할 수있었습니다. 이것은 기본 제공 스타일 시트에서 비롯된 것 같습니다.

는 또한 CSS 리셋 같은 것을 사용하는 것은, 말할 수 있습니다 : 우리가 명시 적으로 국경 도면 변경을 테두리 폭을 설정할 때마다 때문에

<style type="text/css"> 
input {border-width: 1px;} 
</style>

는, 실행 가능한 해결책이 아니다 우리는 또한 일관성을 얻을 테두리 :

http://imgur.com/W5omNWj

바닥과 input 요소 오른쪽 테두리 거의 보이지 유의하시기 바랍니다.

그래서, 내 질문은 :

어떤 대안이 거기인가, 아니면 일부 CSS 리셋 스크립트를 사용 할 의무가 있습니까?
Firefox에 이러한 일관성없는 동작이 나타나는 이유는 무엇입니까?
FF의 OS마다 다른 스타일이있는 경우 향후 Windows, Mac 또는 Linux 버전에서 내 사이트 또는 웹 응용 프로그램이 올바르게 렌더링되는지 어떻게 확인할 수 있습니까? (이것은 매우 불가능한 것처럼 보입니다.)

크롬과 사파리도 테스트했으며이 문제는 표시되지 않습니다.

출처

2013-10-10 Alexandre

Firefox는 양식 컨트롤에 OS 기본 테마가 무엇이든 사용합니다. 이는 OS, OS 버전, 사용자가 선택한 주제 등에 따라 달라집니다.

질문에 대한 답변 2. 질문 1에 대해서는 걱정할 필요가 없습니다. 질문 3의 경우 레이아웃이 양식 컨트롤의 다른 모양에 강건하지 않은 한 할 수 없습니다.

출처

2013-10-10 18:36:33

답변 :

대안.
일관성이있는 것은 아니지만 모든 브라우저 스타일은 OS에 따라 약간 다르게 구성됩니다. 일관성있는 유일한 것은 그들이 모두 서로 모순된다는 것입니다.
그럴 수는 없지만 그게 웹 표준의 목적입니다. 브라우저 공급 업체는 W3C 사양을 구현하기 위해 최선을 다해 코드가 사양을 제대로 준수하는 한 안전해야합니다.

양식 요소가 매우 OS 선택 적이기 때문에 선택 상자가 더 많습니다 (맥에서 스타일을 지정하는 것은 불가능 함).

양식 요소를 모든 방법, 모양 및 (말장난) 양식에서 동일하게 보이도록 너무 많이 제어해야하는 경우 양식 요소를 사용할 수 없으며 빌드/찾기해야합니다. HTML/CSS/JS에 내장 된 대안.

출처

2013-10-10 18:41:41 Adam

안녕하세요, 아담, 답변 해 주셔서 감사합니다. FF 렌더링의 "일관성없는"동작은 다른 브라우저 (예 : Chrome)가 모든 OS에서 기본 제공 스타일 시트에서 동일한 테두리 너비를 사용하기 때문입니다. Chrome의 동일한 HTML은 테스트 한 모든 OS에서 일관된 모양을 유지합니다. – Alexandre

'border-style '을 시도해 보셨습니까 - 일부는'inset'을 사용할 수도 있고 다른 것들은'outset'을 사용할 수도 있습니다. 일관된 모양을 원하면 '단색'을 시도하십시오 – Adam

border-width/border-style 설정으로 재생하려고합니다. 무엇이 나를 귀찮게한다. (내 질문에 분명히 알 수 없다) XP에서는 INPUT이 SELECT보다 크지 만 Win7에서는 정확히 같은 높이를 갖는다. 이렇게하면 CSS 리셋을 사용하거나 border-width를 설정하지 않고도 OS에서 동시에 완벽하게 정렬 된 컨트롤 (INPUT 및 SELECT)을 만들 수있는 방법이 없으며 Firefox에서만 반복합니다. IE조차 더 잘 처리합니다. – Alexandre

Firefox는 OS에 따라 다른 기본 제공 스타일 시트를 사용합니까?

답변

관련 문제