CSS 테두리 스타일 INSET 또는 GROOVE가 IE9와 매우 다름 FF4 또는 Safari5 또는 Chrome2

Question

미안하지만, 특정 그루브 효과를 얻으려고 할 때 다양한 브라우저에서 시각적으로 매우 큰 결과를 얻고 있습니다. 테두리 스타일로 삽입 효과.

{ 
    border: 5px groove #A00; 
} 

또는

{ 
    border: 5px inset #A00; 
} 

파이어 폭스 3.6/4.0보기

를 사용하여 내가 필요하고 내가 생각하는 올바른 홈 또는 삽입 된 렌더링 그 하나입니다. 다른 모든 사람들은 굉장히 다른 것처럼 보입니다. SOLID 또는 OUTSET에 가까이 있습니다. 브라우저에서 개발자가 INSET 및 GROOVE 스타일링이하는 것을 각각 독자적으로 해석 할 수있는 놀랄만한 파티가 될 수있는 정확한 정의는 분명히 없습니다.

주요 브라우저에서 동일한 방식으로 보일 수있는 잘 생각한 설계를 위해 현재 어리석은 차이를 얻을 수있는 방법이 있습니까?

나는 그 무엇이 어떻게 사용될 수 있는지를 알기 만하면 다른 창조적 인 CSS3 물건을 사용하는 것을 두려워하지 않습니다. 어떤 아이디어라도 환영 받고 코드가 특히 좋습니다. spec (강조 내)에서

Answer 1

Firefox/Webkit/IE/Opera는 렌더링하는 패턴 측면에서 모두 일관성이 있습니다. 즉 테두리 왼쪽과 테두리 위쪽 바깥 쪽이 더 어두운 색이며 바깥 쪽은 밝은 색입니다. border-right와 border-bottom이 있습니다.

실제 색상은 브라우저마다 다를 수 있습니다.귀하의 예 :

오페라
어둡게 : # 7f0000; rgb (127,0,0)
라이터 : # c04141; RGB (192,65,65)

파이어 폭스
어둡게 : # 770000; rgb (119,0,0)
라이터 : # d47f7f; RGB (212,127,127)

웹킷
어둡게 # 560000; rgb (86,0,0)
라이터 : # aa0000; RGB (170,0,0)

IE8
어둡게 # 2e0303; rgb (46,3,3)
라이터 : # b80d0c; rgb (184,13,12)

색상 비율이 명확하고 웹킷 하나가 유일한 논리적 인 것 같습니다 - 밝은 색상은 지정된 색상이고 어두운 색상은 RGB 값의 두 배입니다.

다른 것들은 상당히 다르지만 패턴은 적어도 동일합니다.

Answer 2

:

'홈', '리', '삽입'및 '초기'의 값으로 그린 ​​테두리의 색 요소의 테두리 색 속성에 따라

, 이지만 UA는을 사용하여 실제 색상을 계산하는 자체 알고리즘을 선택할 수 있습니다. 예를 들어 'border-color'의 값이 'silver'인 경우 UA는 흰색에서 어두운 회색까지의 그라디언트를 사용하여 경 사진 테두리를 나타낼 수 있습니다.

따라서 테두리를 색칠하는 "올바른"방법은 없습니다. 브라우저 공급 업체는 브라우저에서 테두리를 어떻게 그늘지게 할 것인지를 결정해야합니다.

그래서,이에 대한 대답 :

내가 현재 말도 안되는 차이가 주요 브라우저에서 동일하게 보일 수 있습니다 내 하나 잘 개 생각 디자인으로 일치 얻을 수있는 방법이 있나요?

난 당신이 중첩 요소를 수 생각하고 세밀하게 제어해야 할 경우 여러 국경 'border-color 설정으로 자신을 재생할 수 있습니다. 이러한 경계선을 처음에는 단단하게 만듭니다.

Answer 3

이미 답변을 받았지만 "개요"속성을 사용해보십시오.

이미 설명했습니다 here on SO