처음엔 제가 소스를 잘못 짠 줄 알고....

 

이것저것 찾아보고.. 해봤는데 도저히... 안되어서....

 

혹시나 해서 해당 소스를 그냥 웹문서로 만들어서 테스트하니 문제가 없네요...

 

 

슬라이드 이미지를 만들었습니다.

■보이는 영역

□보이지 않는 영역

 

■□□□□□□□

 

처럼 배치를 하였는데요...

 

ie10,11, chorme, firefox에서는 문제가 없습니다.

 

오로지 IE9에서만 문제가 발생하고 있습니다......

 

 

더군다나.... 위젯으로 만들면 해당 문제가 발생하지만 그냥 html문서로 만들면

 

문제가 없는 걸로 보아 위젯단에서 뭔가 강제적으로 css 지정이 있는 듯 합니다...

 

아래는 사용한 스타일시트입니다.

 

.effectSlider_Container { padding: 0; margin: 0; white-space: nowrap; position: relative; overflow: hidden;}

.effectSlider_Container .slidestatus { width: 100%; position: absolute; left:0; bottom: 0; height: 5px; z-index: 5 }
.effectSlider_Container .slidestatus .gauge { width: 0; height: 100%; background: #ca2327; }
.effectSlider_Container .slideshow { height:100%; white-space: nowrap; font-size:0; }
.effectSlider_Container .slideshow .slide {
	position:relative;
	width:100%;
	height:100%;
	overflow: hidden;
	background-position: 50% 0;
	background-size: cover;
	background-repeat: no-repeat;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align:top;
	zoom: 1;
	*display: inline;
}

.effectSlider_Container .no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}

 

확인할 수 있는 페이지입니다.

 

http://anizen.kr/slide 위젯페이지

http://anizen.kr/testwork/slide/ html문서로 만든 페이지

 

위의 두개의 링크는 코드는 모두 동일합니다.

단지 위젯으로 만들어서 들어갔느냐... html 문서로만 제작되었느냐의 차이입니다.

 

근데 ie9에서 보시면 아시겠지만...

 

위젯으로 제작한 페이지는 슬라이드(이미지)들이 white-space:nowrap;이 안먹어서 보이진 않지만 밑으로 쭈욱 정렬되어 있습니다.

ㅁ

ㅁ

ㅁ

ㅁ

 이렇게 말이죠...

 

근데 html페이지의 경우 정상적으로

ㅁㅁㅁㅁㅁㅁ

이렇게 배치되어있습니다.

 

동일한 코드로 제작했는데 위젯에서만 해당 증상이 있고...

 

IE9에서만 해당 현상이 일어나는 것으로 미뤄짐작해볼 때.....

 

뭔가... 위젯 자체에서 간섭하는.. 뭔가가 있는 것 같은데...

 

도저히 못찾겠네요..

 

열심히 개발자모드로 찾아보기도 해봤지만..... 못찾았습니다...ㅡ.ㅜ

 

 

참고로 !important 속성을 지정해보기도 해봤지만.. 소용이 없었습니다.

 

고견 부탁드립니다.

 

감사합니다.