IE에서 절대 위치로 축소판 위로 가져옵니다

Question

썸네일 그림 그리드를 만들었습니다. 썸네일 그림 위에 마우스를 올려 놓으면 그림이 사라지고 블록 색상이 이미지 제목과 함께 표시됩니다. 하지만 인터넷 탐색기에서는 사진과 텍스트가 설정된 축소판 공간 내에 표시되는 대신 왼쪽 구석에 모두 비좁은 공간이 있습니다.

이미지 및 제목은 상자/카테고리 - 와이드 스크린 div에 저장되며, wordpress의 동적 코드입니다.

아이디어가 있으십니까?

#page-wrap {width: 1060px; padding-bottom: 40px;} 
.box { margin: 20px; float: left; } 

.category-widescreen { width: 400px; height: 229px; background: #FF0000; } 
.category-widescreen a{text-decoration: none;} 
.category-widescreen h1{font-size: 30px; color: #FFF; line-height: 34px;} 
.category-widescreen h2{font-size: 26px; color: #FFF; line-height: 30px;} 

.title{position:absolute; top:14px; left:14px; z-index: 0; padding-right: 14px;} 

.category-widescreen img { max-width: 400px; max-height: 229px; float: right; padding: 0 0 2px 10px; z-index:1; position:relative;} 

도움이 필요하십니까?

Answer 1

너무 모호합니다! 다른 사람이 암시 하듯이 기본 html 구조를 제공하십시오. 그러나 일부 관측 :
사용 된 글꼴 크기가 너무 크지 않습니다 (30px 및 26px)?
제목 {위치 : 절대; ...} .... 부모가 위치에 따라 스타일이 지정되었는지 확인하십시오. 그렇지 않으면 상대가 엉망이됩니다.
어때요? 당신은 일이 올바른 방향으로 흘러가는 것을 확인하고 있습니까?

희망이 도움이되었거나 눈을 크게 뜨게 만들었습니다. 하하하 ...

Answer 2

절대적으로 배치 된 요소가 따라야 할 위치를 알 수 있도록 게시물에 position:relative을 설정해야합니다.

이 시도 :

.post { 
position:relative; 
}