Question

好的，首先，我花了很多时间才得到解决方案，但我想知道原因。无论是浏览器错误还是我犯了一些错误。

请查看以下完整代码，这些代码会在Google Chrome，Opera和其他一些浏览器中错误地呈现此页面。此代码在FireFox中正常工作。我不能给jsfiddle链接，因为这个问题没有在那个环境中重现。

<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>

如果您能够在Chrome或Opera中重现此代码（middlecontainer div变得不可见），那么您可以将style="float:left"内联添加到img标记中。这解决了这个问题，但我试图找出这个问题的原因。

最重要的是，FireFox正确呈现此页面没有任何问题。

如果我需要在某个在线网络服务器上上传此代码，请告诉我。

我已在此Link

上传了网页

Answer 1

这是因为浏览器会自动将网站呈现为默认缩放，除非您另有说明。您应该使用元标记来声明网页的缩放。查看https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag。如果您需要更多帮助，或者这不是您想要的，请回复。

从手机发送。

内容在Chrome，Opera中缩小，但FireFox正确呈现

1 个答案: