CSS는 IE에서 작동하지만 크롬에서는 작동하지 않습니다.

모달 팝업 익스텐더 용 내 CSS는 Chrome에서 작동하지 않지만 IE에서는 완벽하게 작동합니다. 이것은 CSS가 완벽하게 작동되는 IE의 스크린 샷이다CSS는 IE에서 작동하지만 크롬에서는 작동하지 않습니다.

.modalBackground 
{ 
    background-color:#250517; 
    opacity:0.5; 
    filter: alpha(opacity = 50); 
} 

.modalPopup 
{ 
     background-color:White; 
     border-width:3px; 
     border-style:solid; 
     border-color:Black; 
     padding:3px; 
     width:250px; 
     height:300px; 

}

: 여기

내 CSS입니다

이는 크롬의 스크린 샷이며, 이는에 CSS가 작동하지 않습니다.

출처

2012-08-05 user484458

첫 번째 스크린 샷은 CSS가 완벽하게 작동하는 IE입니다. – user484458

적용된 CSS는 모달 팝업에서 어떻게 보이나요? Chrome의 개발 도구에서 적용된 CSS를 볼 수 있습니까? 나는 특별히 'height : 300px' 값이 적용되지 않는 이유에 대해 특별히 관심이 있습니다. –

두번째는 CSS가 작동하지 않는 크롬입니다. – user484458

.modalBackground { 
    background: #250517; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

.modalPopup { 
    background: #FFF; 
    border: solid 3px #000; 
    display: block; 
    padding: 3px; 
    width: 250px; 
    height: 300px; 
}

출처

2012-08-05 01:20:41

문제를 설명하고 문제를 해결하기 위해 수행 한 작업을 설명해 주시겠습니까 (차이점을 볼 필요가 없도록)? 어쨌든'display : block; '을 추가 한 것으로 보입니다. 아마도 차이는 없습니다. – Ryan

'display : block;'은 요소가 설정된 너비와 높이를 따르도록하기 때문에 차이가 있습니다. 또한 그의 국경은 검은 색이 아닌 회색이었습니다. 국경 색 : 검정색을 사용했기 때문입니다 (수도 "B"를 참고하십시오). –

@ChrisClower 모달 윈도우가 블록 레벨이 아닌 경우 IE에서도 높이가 적용되지 않지만 적용됩니다. Btw, CSS 코드는 대소 문자를 구분하지 않습니다. 브라우저는 'Black'을 잘 이해합니다. CSS처럼 쓸 수도 있습니다 -'bOdY {cOlOr : ReD; }'- ** 데모 : ** http://jsfiddle.net/mksmW/':)' –

보세요, 이런 식으로 휠을 다시 발명 할 필요가 없습니다.

크로스 브라우저 및 신뢰할 수있는 플러그인을 사용하는 것이 좋습니다. 많은 시간과 노력을 절약 할 수 있습니다.

해보십시오 쉐도우 (A jQuery 플러그인) : http://www.shadowbox-js.com/

행운을 빕니다.

출처

2012-08-05 01:20:51

크롬 브라우저에서 정상적으로 작동했습니다. here 또는 here을 볼 수 있습니다.

크롬이 업데이트되지 않을 수 있습니다. 크롬 21을 사용해 보았습니다.

출처

2012-08-05 01:30:53

문제가 해결되었습니다. 이전 값이 저장된 이유는 그것이 문제를 야기하는 이유입니다. 역사를 지운 후에는 완벽하게 작동합니다 :) – user484458

CSS는 IE에서 작동하지만 크롬에서는 작동하지 않습니다.

답변

관련 문제