삽입 된 상자 그림자는 SASS 사용 IE9

내가 어떤 버튼에 다음과 같은 삽입 된 그림자를 적용하기 위해 노력하고있어

@mixin innerShadow { 
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .45); 
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .45); 
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .45); 
} 

.button { 
    display: inline-block; 
    @include roundedCorners(5px); 
    @include innerShadow; 
    padding: 0.45em 1.5em 0.5em; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    &:active { 
     position: relative; 
     top: -1px; 
    } 
}

그것은 파이어 폭스, 사파리, 오페라와 크롬에서 잘 작동하지만 IE9에서 그림자는 단순히 전혀 나타나지 않습니다. 바깥 쪽 상자의 그림자에서도 작동하지 않으며, RGBA 대신 16 진수 코드로 색상을 정의하지도 않습니다.

버튼이 없으면 긴급한 문제는 아니지만 아무도 왜 이런 일이 벌어 질지 알지 못했습니다. 유효한 doctype이 있고 페이지에 테두리가 축소 된 요소가 없는지 확인했습니다.

감사합니다.

출처

2012-04-02 Laura Hogarth

이미 답변을 드렸습니다. http://stackoverflow.com/questions/5617455/issue-with-box-shadow-on-ie9 –

고마워,하지만 그 문제는 아닌 것 같습니다. 나는 유효한 doctype ()을 사용하고 있으며 페이지에 테이블이 없기 때문에 border-collapse와 아무 관련이 없습니다. 그리고 브라우저 모드가 IE9로 설정된 IE dev 도구를 체크했습니다. –

CSS3 항목에 나침반을 사용하는 것이 더 좋습니다. 왜냐하면 공급 업체 - 접두사를 작성하지 않아도되기 때문입니다. 당신은 그것을 여기에서 시도 할 수있다 http://compass-style.org/examples/compass/css3/box_shadow/

나는 IE9의 "a"태그와 함께 당신의 CSS를 시험해 보았다.

상자 섀도우 CSS가 작동하므로 문제는 아마도 html에 있습니다.

출처

2012-05-07 17:59:29 Pat

삽입 된 상자 그림자는 SASS 사용 IE9

답변

관련 문제