CSS가 제대로 배치되지 않았습니다 - Safari

왼쪽에 하나, 오른쪽에 두 개의 div가있는 웹 페이지가 있습니다. 나는 float : left/right;CSS가 제대로 배치되지 않았습니다 - Safari

모두 FireFox, IE (IE6 !!! 포함) 및 Chrome에 적합합니다. 하지만 사파리에서 어떤 이유로 왼쪽 div가 왼손 div 아래로 올라가고 있습니다. 따라서 div 주위에 테두리를두고 Safari에서만 오른쪽 div가 다른 div의 일부라고 생각합니다. divs 및 closing div에 대한 페이지를 확인한 결과 모두 좋았습니다.

Chrome에서 작동하지만 Safari가 작동하지 않는 이유는 다소 혼란 스럽습니다. 이 두 브라우저는 모두 Webkit 브라우저입니까?

모든 도움을

출처

2011-03-08 patsybrady

가 해결됩니다. –

/오른쪽 가장 왼쪽 div의 작업을 수행하는 "가장 보편적으로 받아 들여"방법 모두 div의 직후 플로트를 삭제, 왼쪽 떠입니다 감사합니다. float 된 요소 후 그 아무것도 보장합니다

<div style="clear:both"></div>

는 플로트 속성에 의해 주위에 충돌하기되지 않습니다 때까지 전반에 걸쳐 단계적 것이다 : 취소하는 가장 쉬운 방법은 다음과 같이 두 개의 div의 직후 사업부를 추가하는 것입니다 그들은 닫힙니다.

이제 일부 브라우저에는 여백/패딩 (주로 IE)에 문제가 있습니다. 이미 배경이없는 경우 배경과 원하는 너비보다 작은 너비 (예 : 둘 다 화면의 50 % 인 두 div가 필요하면 테스트 목적으로 48 % 너비를 할당하십시오. 이제 문제가 해결 될까요? 그렇다면 사파리가 해당 div에 설정된 수레/여백에 부정적으로 반응 할 수 있습니다. 여백을 조정하고 패딩, 헹구기, 반복하십시오.

주요 내용 float divs는 급하게 혼란스러워 할 수 있습니다. 특히 부모님이나 전체 화면의 100 %를 찾으려는 경우 특히 그렇습니다. CSS 재설정이나 개인적인 선호, 그리드 시스템 960.gs으로 쉽게 얻을 수 있습니다. 그렇지 않으면 임의로 조정할 수 있습니다. 즉, a) 브라우저에서 좋게 보이거나 b) 고통스러운 브라우저를 사용합니다. 특정 스타일 시트. 어느 쪽이든에 아무 감사도!

출처

2011-03-08 17:33:39 bpeterson76

나는 비슷한 사건을 해결할 수 없다. 내 사건은 사파리 다. 다른 브라우저는 괜찮습니다. 내 문제는 모바일 크기로 내 창 크기를 조정하려고 할 때만 존재합니다. 모바일 크기로 시작하는 웹 페이지를 열면보기가 정상입니다. 이전에 말했듯이, 창 크기를 조정하면 두 번째 div가 아래로 갈 것입니다. –

패딩/여백 주석에 +1. 내 문제는 마진 때문이었습니다. 떠 다니는 div 중 하나에'margin-right '를 적용하고 그 아래에 다음 div를 밀어 넣었습니다. 나는 그것을'패딩 오른쪽'으로 바꾸었다. – jtate

이 시도, 언급하기 어려운 코드가 없으면 문제

.container{ clear:both} 
 
.container .label-info { float:right; position:relative; min-width:100px;} 
 
.container label { float:left;}

<div class="container"> 
 
    <div class="label-info">Right side</div> 
 
    <label>My Label</label> 
 
</div>

출처

2014-12-12 16:49:35

왜? 설명 좀 해. – rayryeng

CSS가 제대로 배치되지 않았습니다 - Safari

답변

관련 문제