Chrome에서 콘텐츠가 줄어들지 만 Opera에서 FireFox가 올바르게 렌더링됩니다.

좋아, 우선 더 많은 시간을 보낸 후 해결책을 얻었지만 그 이유를 알고 싶습니다. 브라우저 버그인지 또는 어떤 실수를하고 있습니다.Chrome에서 콘텐츠가 줄어들지 만 Opera에서 FireFox가 올바르게 렌더링됩니다.

Google 크롬, Opera 및 기타 몇몇 브라우저에서이 페이지를 잘못 렌더링하는 다음 코드를 참조하십시오. 이 코드는 FireFox에서 올바르게 작동합니다. 이 문제는 해당 환경에서 재현되지 않기 때문에 jsfiddle 링크를 제공 할 수 없습니다. 당신은 크롬이나 오페라 (middlecontainer div에 보이지 않는이된다)이 코드를 재현 할 수있는 경우

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
#middlecontainer{width:1000px; height:auto; background-color:#fcf6e2; float:left;} 
.matterbox{width:750px; height:auto; float:left;} 
.rightsidebox{width:250px; height:auto; float:right; } 
.matter{padding:15px; padding-top:10px; 
.heading{ padding:8px; padding-left:5px; font-weight:bold; background-color:#f5d7a7;} 
.subheading{font-size:15px; padding-top:5px; color:#663300; font-weight:bold;} 
</style> 
</head> 
<body> 
<div id="middlecontainer"> 
    <img src="http://placehold.it/1000x150" align="top"/> 
    <div class="matterbox"> 
    <div class="matter"> 
     <div class="heading">Welcome to product registration</div> 
     <p class="style1">Important </p> 
    </div> 
    </div> 
    <div class="rightsidebox"> 
    <div class="matter"> 
     <p> This is right hand column </p> 
    </div> 
    <div style="clear:both"></div> 
    </div> 
</div> 
</body> 
</html>

당신은 태그를 IMG에 style="float:left" 인라인을 추가 할 수 있습니다. 이 문제는 해결되지만이 문제의 원인을 찾으려고합니다.

가장 중요한 점은 FireFox가이 페이지를 문제없이 올바르게 렌더링한다는 것입니다.

일부 온라인 웹 서버에이 코드를 업로드해야하는지 알려주세요.

난 당신이 달리 명시하지 않는 한 브라우저가 자동으로 기본 줌에 웹 사이트를 렌더링하기 때문이다이 Link

출처

2014-11-18 Silkograph

이 피들을 조사하여 어떤 문제가 발생했는지 알려주시겠습니까? http://jsfiddle.net/q2myddq0/ –

OK, 웹 페이지를 Google 드라이브로 복사했습니다. FireFox의 페이지를 비교해보십시오. Chrome 또는 Opera 대. 여기 링크가 있습니다. [link] (https://e0a68005865c6469f758acd43be8b2e71dff5bd1-www.googledrive.com/host/0B4rUu4ji-7j-ejBKMDB6Nkc2eDg) – Silkograph

에 웹 페이지를 업로드했습니다. 메타 태그를 사용하여 웹 페이지의 확대/축소를 선언해야합니다. https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag을 확인하십시오. 더 많은 도움이 필요하거나 의견을 찾지 못하면 다시 의견을 말하십시오.

모바일에서 전송되었습니다.

출처

2014-11-18 08:55:05

뷰포트 메타 태그를 추가하여 웹 페이지를 확인했지만 행운은 없습니다. 기본적으로 나는 태블릿/모바일뿐만 아니라 Windows XP/7에서도이 문제를 겪고 있습니다. FireFox, Chrome 또는 Opera에서이 [link] (https://e0a68005865c6469f758acd43be8b2e71dff5bd1-www.googledrive.com/host/0B4rUu4ji-7j-ejBKMDB6Nkc2eDg)를 확인하십시오. – Silkograph

@Silkograph clear를 사용하여 시도 : both; 숨겨진 콘테이너 div에 –

당분간은 실제 솔루션이 아니지만 실시간 웹 사이트의이 문제를 해결하기 위해 모든 이미지에'float : left'를 추가했습니다. 나는 당신의 해결책을 시도하고 당신에게 알려줄 것입니다. 감사. – Silkograph

Chrome에서 콘텐츠가 줄어들지 만 Opera에서 FireFox가 올바르게 렌더링됩니다.

답변

관련 문제