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

【问题标题】：Content shrinks in Chrome, Opera but FireFox renders it correctly内容在 Chrome、Opera 中缩小，但 FireFox 正确呈现
【发布时间】：2023-04-04 04:25:01
【问题描述】：

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

请找出以下整个代码在 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 中重现此代码（中间容器 div 变得不可见），那么您可以将 style="float:left" 内联添加到 img 标签。这解决了这个问题，但我正在尝试找出这个问题的原因。

最重要的是，FireFox 可以毫无问题地正确呈现此页面。

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

我已经在这个Link上传了网页

【问题讨论】：

您能否通过查看这个小提琴告诉我您面临的问题是什么：jsfiddle.net/q2myddq0
好的，我已将网页复制到谷歌驱动器，请比较 FireFox 与 Chrome 或 Opera 中的页面。这是一个链接link

标签： css google-chrome opera

【解决方案1】：

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

从手机发送。

【讨论】：

我已经通过添加视口元标记检查了网页，但没有运气。基本上，我不仅在平板电脑/移动设备中遇到了这个问题，而且在 Windows XP/7 中也遇到了这个问题。请在 FireFox 和 Chrome 或 Opera 中查看这个link。
@Silkograph 尝试使用 clear:both;在被隐藏的容器 div 上
暂时，我已将float:left 添加到所有这些图像中，以解决实时网站的这个问题，尽管它不是真正的解决方案。我会尝试您的解决方案并让您知道。谢谢。