IE 및 Firefox 오버 플로우 문제/버그?

저는 건물에있는 웹 사이트에 대해 세미 반응 형 헤더를 만들려고합니다. 그러나 IE와 Firefox에서 오버플로 문제가 발생합니다. 그러나 Chrome은 완벽하게 작동합니다.IE 및 Firefox 오버 플로우 문제/버그?

내가 의미하는 바를 증명하기 위해 JSFIDDLE을 만들었습니다. 크롬에서

,이 같은 것을 볼 수 :

enter image description here

그러나 파이어 폭스와 크롬에서 동일한 Jsfiddle의를, 같은 바닥에는 빨간색 테두리가 없다

이 문제를 해결하기 위해 노력한 한 가지 방법은 내 CSS를 다음과 같이 변경하는 것입니다.

.header .header-image { 
    position: absolute; 
    overflow: hidden; 
    top:0; 
    bottom:1px; 
    left:0; 
    right:0; 
}

이것은 완벽하게 작동하지만,이 원인이되는 방법은 내 원하는 효과를 얻을 여전히 문제를 해결할 수 있습니다 무엇

(이미지 경계 위와 아래) 구글 크롬에 흰색 공간으로 남게?

출처

2014-09-17 Hunter Mitchell

나는 내 질문에 더 좋은 의견을주었습니다. 제발 자신을 설명하지 않고 downvote하지 마십시오. 나는 오히려 그 질문을 향상시킬 것이다. 감사. –

이미지를 절대적으로 배치하는 것과 같은 이유를 이해하지 못하는 이유가 있습니까? 그것은 오버레이가 헤더를 감쌀 필요가 있기 때문입니다. 나는 당신의 jsfiddle에서 그것을 고치려고 노력한다. 그리고 나는 그것이 붉은 테두리를 보여주기 위해 얻는다. 그러나 나는 요소들을 떠 다니게했다. 그래서 그것이 당신을 위해 일하는지 모른다. 만일 그렇다면, 나는 새로운 jsfiddle를 만들 것이다. –

: 당신은 내가 삭제 한 볼 수 있듯이

.header { 
    min-width: 1100px; 
    position:relative; 
    overflow:hidden; 
    width: 100%; 
    height:350px; 
    border-bottom: 1px solid #FF0000; 
}

"디스플레이 : 테이블;" 선언하고 잘 작동합니다.

출처

2014-09-17 01:42:20

감사합니다. 오버레이 div를 세로로 가운데에 배치하기 위해 테이블을 사용하고 있었지만, 다르게 배치 할 수는 있습니다. 감사. –

-1

Chrome 및 Firefox의 접두사와 관련이있을 수 있습니다. 접두사의 예입니다 안드로이드 : 크롬 -webkit- : 파이어 폭스 -webkit- : -moz- Internet Explorer를 아이폰 OS -ms- : 오페라 -webkit- : 사파리 -O- : -webkit - .header이 하나처럼 될 때까지 당신의 헤더 선언을 변경 빨간색 테두리를 표시하기 위해

출처

2014-09-17 01:26:44 Tom

이것은 전혀 대답이 아닙니다 ... – MindlessRanger

나는 의견 섹션에 넣으 려 죄송합니다. 대답은 확실하지 않았습니다. – Tom

IE 및 Firefox 오버 플로우 문제/버그?

답변

관련 문제