구글 크롬 대 파이어 폭스 HTML/CSS 구조체

Question

그래서 나는 웹 사이트와 관련해서 파이어 폭스에 대해이 이상하고 성가신 문제를 겪고있다.

이 링크를 한 번 봐 걸릴 경우 : 파이어 폭스에서 그것을 확인 할 때 이미지가 너무 잘 표시 및 텍스트 것을 볼 수 있습니다 그것을보고 있지만, 이미지가 사라있는 동안은 크롬을 사용하는 경우 http://www.apollolive.com/?page_id=429

을 왜 그런지 모르겠습니다.

Internet Explorer는 더욱 심각합니다. 모든 이미지를 하단의 한 수직선에 표시합니다.

여기에 무슨 일이 일어 났는지 말해 줄 수 있습니까?

Answer 1

왜 img 태그를 사용하고 bakcground-image를 설정했는지 모르겠지만 .... 어쨌든 Firefox의 문제는 img이 기본적으로 인라인이며 설정 한 크기가 요소에 영향을 미치지 않습니다. 추가 display 특성보십시오 :

.sampleoverlay img { 
    display:block; 
} 

_{는 또한 ID는 클래스 명에 대한 모든 IMG 변화가 동일한 #allimg이 고유해야합니다을} IE 지금

어쩌면 당신은 IE8 및 IE9에 나를 위해 잘 작동 IE7 문서 모드에서 당신은, IE7은 같은 효과를 복제하려면이 옵션을 사용해야합니다 inline-block 지원하지 않습니다

.sampleoverlay { 
    display:inline-block; 
    *display:inline; 
    *zoom:1; 
} 

또한 IE7은 background-size를 지원하지 않습니다. 나는이 문제가 IE의 버전이라고 확신한다.

_{* 목표 IE7}