웹 서버에 업로드 후 레이아웃이 깨졌습니다.

작은 사이트 (100 % CSS 레이아웃)를 만들었습니다. IE, Firefox에서 테스트 해 보았습니다. 호스팅 회사 웹 서버 레이아웃에 업로드 한 후 인터넷 탐색기에서만 레이아웃이 깨졌습니다. 나는 CSS가 제대로로드되었다는 것을 의미하지만 몇몇 요소는 그들의 위치에 있지 않다. 내 로컬 PC와 웹 서버에서 CSS 파일을 여러 번 확인했으며 동일한 내용을 가지고 있습니다. 예를웹 서버에 업로드 후 레이아웃이 깨졌습니다.

#main{ 
    position: relative; 
    width: 960px; 
    margin: 0 auto; 
}

코드에 대한

위 화면의 중앙에 #main div에 넣습니다. 내 컴퓨터에서 IE, Firefox 등에서 잘 작동하지만 웹 서버에서 div가 IE에서 왼쪽으로 떠 있습니다.

무엇이 잘못 될 수 있습니까?

출처

2011-04-06 prista

제대로 작동하지 않는 CSS 코드를 표시 할 수 있습니까? –

Internet Explorer에는 문서 렌더링 모드를 결정하는 데 사용되는 여러 가지 항목이 있습니다. 로컬 또는 인터넷상의 문서가 그 중 하나입니다.

는 (둘 모두 또는 작업 깨진 중) 문서의 일관성을 확인 후

<meta http-equiv="X-UA-Compatible" content="IE=edge">

을 추가합니다. 그렇다면 문제가 무엇인지 확인하고 최상의 표준 모드에서 IE를 사용하기 위해 CSS를 수정해야합니다.

Microsoft provide more details.

또한 도구 모음의 호환성 단추를 사용하여 이전의 버그가 많은 IE 버전과의 호환성을 확인하십시오.

IE 이전 버전의

출처

2011-04-06 08:33:38 Quentin

+1, 나는 거의 동일한 대답을 쓰고 있었다. 당신이 언급하지 않은 유일한 것은 (내가 가고있는) F12를 눌러서 "Document Mode"가 로컬과 라이브에서 무엇이 문제인지를 빠르게 확인하는 것입니다. – thirtydot

그쪽은 IE8의 트릭을 만들었지 만 IE7을 구현하는 방법은 무엇입니까? – prista

IE7에서 문제를 일으키는 버그를 식별하고 해결해야합니다. – Quentin

, 당신은 일을 그런

body {text-align: center};

당신은 또한 텍스트 정렬을 추가해야 할 것, 즉 : 중심 얻을 CSS의 여분의 비트를 추가하는 데 필요한 : 왼쪽; 텍스트가 중심되지 않도록 첫 번째 자식 DIV로 :

#main{ 
position: relative; 
width: 960px; 
margin: 0 auto; 
text-align: left; 
}

브라우저가 이전 버전으로 행동하는 경우 나는 이것이 문제가 될 수 있으므로 코드에 이것을 추가하는 시도 할 수 있었다 생각한다.

출처

2011-04-06 11:41:44 james6848

웹 서버에 업로드 후 레이아웃이 깨졌습니다.

답변

관련 문제