IE11에 이상한 마진이있는 문제 - 오버플로와 부드러운 스크롤이 관련 될 수 있습니다.

Question

웹 사이트에 약간의 문제가있어서 plenarto.github.io 지난 며칠 동안 버그가 있습니다.

IE11로 열 때마다 웹 사이트의 오른쪽에 이상한 흰색 여백이 나타납니다. 그것은 아래에서 위로 웹 사이트를 통해 모두갑니다. 당신은 개발자 도구로, 목표도 함께 어떤 테두리를 추가 할 수 없습니다

* { 
border: solid red 1px; 
} 

화이트 이익률은 하단에 추가 수평 스크롤을 가지고 웹 사이트를 야기한다.

덧붙여 overflow-x를 추가하면 html과 body가 숨겨져 문제가 해결되지만 세로 스크롤 문제가 발생합니다 (부드러운 스크롤과 연결될 수 있습니다). overflow-x : hidden이 추가되면 IE에서 마우스 휠로 웹 사이트를 스크롤 할 수 없으며 Chrome에서는 내부 링크가 모두 작동하지 않습니다. 나는 아주 잠시 동안 그것에 대해 어떤 해결책을 찾기 위해 노력했습니다

...

사람이 오버 플로우-X를 사용하지 않고 그것을 제거하는 이상한 여백의 원인이 될 어떻게 수 알고 있나요 숨겨진?

미리 감사드립니다.

Answer 1

문제는 #projects .main-container 어딘가에 있습니다. 이 div 문제에 overflow: hidden을 추가하면 문제가 해결됩니다. 프로젝트 아이템 중 하나의 여백이 넘칠 것 같습니다.

Answer 2

문제는 "프로젝트"섹션의 요소입니다. 특히 클래스 project-container. 전체 스타일이 제대로 구현되지 않았습니다.

이 함께 시도 :

.project-container { 
    display: inline-block; 
    width: 33%; 
    padding: 20px; 
    box-sizing: border-box; 
} 

을 사용하여 그림자가 다시 단지가 아닌 div 자체를 들어, div 내부하여 img 스타일을합니다. 또한 미디어 쿼리의 너비를 조정해야 할 수도 있습니다. 당신이 용기 외부 크기를 증가 고정 폭 요소에 패딩, 여백, 테두리 나 그림자를 추가 할 때마다

이 디스플레이를 추가하여 우회 할 수 있습니다 inline-block 및 box-sizing: border-box 속성을.