배경 이미지가 페이지 전체 길이로 확장되어야 할 때 페이지 오른쪽에 공백이 표시됨 [닫힘]
웹 페이지 배경 이미지는 페이지 오른쪽에 공백이 표시되는 iPad / iPhone의 iOS의 Safari는 아니라고 FireFox 문제가 있습니다.
배경 이미지는 다른 브라우저에서 잘 확장 언어 브라우저에서 브라우저의 전체 길이를 확장하지 않는 데 어려움이 있습니다.
테이크 파이어 폭스에 우리의 사이트에서 무슨 뜻인지 볼 수 있습니다.
나는 추가했다 :
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
CSS에 삽입하면 문제가 해결 될 것입니다.
업데이트 된 .css 파일은 여기에서 사용할 수 있습니다.
Ghost CSS Elements 용 CSS를 디버그하십시오.
이 책갈피를 사용하여 CSS를 디버그하십시오. https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
또는 직접 CSS를 추가합니다.
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
제 경우에는 Facebook 좋아요 버튼이 문제를 일 으세요습니다.
iOS 특정 CSS 만 추가 탐색을 배치했습니다. overflow-x를 숨기는 것이 저에게 해답 인 것입니다. 너비를 100 %로 지정하면 콘텐츠가 넓어지는 경우 도움이된다고 가정합니다. 이 문제는 iOS에서만 발생했습니다. Firefox에도있는 경우 @media가 특히 모바일 장치를 대상으로 html 및 body 블록 만합니다.
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
html,
body{
width:100%;
overflow-x:hidden;
}
}
이것이 누구에게나 잘못된 것 같으면 나를 엉덩이하십시오 :)
이것은 오래된 질문이지만 2 센트를 더할 생각했습니다. 나는 고스트 CSS를 포함하여 위의 솔루션을 시도해라는 것을, 사용을 위해 확실히 절약 할 것입니다. 그러나 이들 중 어느 것도 내 상황에서 효과가 없습니다. 문제를 해결 한 방법은 다음과 가변합니다. 바라건대는 다른 사람을 도울 것입니다.
인스펙터 (또는 원하는대로)를 열고 body 태그의 첫 번째 div부터 시작하여 display: none;해당 요소에만 추가 합니다. 스크롤 막대가 사라지면 해당 요소에 문제를 일으키는 요소가 포함 된 것입니다. 그런 다음 첫 번째 CSS 규칙을 제거하고 포함하는 요소로 한 수준 아래로 이동합니다. 해당 div에 CSS를 추가하고 스크롤 막대가 사라지면 요소가 문제를 일으키는 요소이거나이를 포함하고 있음을 알 수 있습니다. CSS를 추가해도 아무 일도 일어나지 않으면 문제를 일으킨 div가 아니고 컨테이너의 다른 div가 원인이거나 컨테이너 자체가 원인임을 알 수 있습니다.
일부에게는 너무 많은 시간이 소요될 수 있습니다. 운 좋게도 내 문제는 머리글에 있었지만 문제가 바닥 글이나 무언가에 있다고 말하면 시간이 조금 걸릴 것이라고 상상할 수 있습니다.
overflow-x: hidden; 나를 위해 완벽하게 작동합니다.
문제는 파일에 있습니다.
style.css-721 행
#sub_footer {
background: url("../images/exterior/sub_footer.png") repeat-x;
background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999;
padding-top:10px;
font-size:9px;
min-height:40px;
}
줄을 제거하십시오.
-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999;
이것은 기본적으로 바닥 글에만 그림자 그라디언트를 제공합니다. Firefox에서는 문제를 일으키는 첫 번째 줄입니다.
나는 또한 동일한 문제가 있었고 ( 웹 사이트 본문 배경이 iPhone Safari에서 오른쪽 흰색 여백을 렌더링 함 ) <html>태그에 배경 이미지를 추가 하면 문제가 해결 된다는 것을 알았습니다 .
전에
body {background:url('images/back.jpg');}
후
html, body {background:url('images/back.jpg');}
분명히 (-o-min-device-pixel-ratio : 3/2) 문제를 일으키고 있습니다. 내 테스트 사이트에서 오른쪽이 잘리는 원인이되었습니다. 현재 작동 하는 github 에서 해결 방법을 찾았습니다 . 사용 (-o-min-device-pixel-ratio : ~ "3/2")이 잘 작동하는 것 같습니다.
질문에 일반적인 표준에 대한 답변이 있지만 사이트를 살펴보면 여전히 가로 스크롤 막대가 있음을 알았습니다. 나는 또한 이것에 대한 이유를 알아 차렸다 : 당신은 코드를 사용했다 :
.homepageconference .container {
padding-left: 12%;
}
요소의 너비가 100 %라는 코드와 함께 사용되어 전체 너비가 화면 크기의 112 % 인 요소가 발생합니다. 이 문제를 해결하려면 패딩을 제거하거나 동일한 효과를 위해 여백을 12 %로 바꾸거나 요소의 너비 (또는 최대 너비)를 88 %로 변경합니다. 이것은 main.css 라인 343에서 발생합니다. 이것이 도움이되기를 바랍니다!
나는 같은 문제가 있었기 때문에 몇 가지를 시도했습니다. 그중 하나가 나를 위해 작동하는 것처럼 보였습니다. 너비를 제거하고 body 태그에 플로트를 추가했습니다.
모든 인스턴스에서 작동하지 않을 수 있지만 최근에 있었던 시나리오에서는 콘텐츠 요소에 오버플로를 숨기는 것이 불가능했습니다.
수평 위치에서만 iPad 오른쪽에 흰색 선이 나타납니다. 나는 배경이 960px로 설정되고 z-index가 -999로 설정된 고정 위치 div를 사용하고있었습니다. 이 특정 div는 미디어 쿼리로 인해 iPad에만 표시됩니다. 그런 다음 콘텐츠를 960px 너비의 div 래퍼에 넣었습니다. 이 페이지에 제공된 답변은 제 경우에 도움이되지 않았습니다. 흰색 줄무늬 문제를 해결하기 위해 콘텐츠 래퍼의 너비를 958px로 변경했습니다. Voilá. 수평 위치에서 iPad의 흰색 오른쪽 흰색 줄무늬가 더 이상 없습니다.
이 질문은 한동안 계속되어 왔지만 내가 찾을 수있는 수정 사항 중 어느 것도 나에게 효과가 없었지만 (ipad와 동일한 문제가 있음) 내가 상상하는 대부분의 사람들에게 효과가있는 나만의 솔루션을 관리했습니다.
내 코드는 다음과 같습니다.
html {
background: url("../images/blahblah.jpg") repeat-y;
min-width: 100%;
background-size: contain;
}
즐겨!
'IT' 카테고리의 다른 글
| 자바를 사용하여 이미지 높이와 너비를 얻는 방법은 무엇입니까? (0) | 2020.08.22 |
|---|---|
| "여러 곳에서 구현할 수있는 방법을 구현할 수 있습니다." (0) | 2020.08.22 |
| 긴 페이지를 DIV로 스크롤하는 JavaScript (0) | 2020.08.22 |
| curl이 라이브러리를 무료로 제공하는 이유는 무엇입니까? (0) | 2020.08.22 |
| Java 공격 속도 대 Scala 속도 (0) | 2020.08.22 |