跨浏览器字体宽度。适用于 IE 和 Chrome，但不适用于我的移动浏览器 (Galaxy S2)答案

【问题标题】：Cross Browser Font Width. Works in IE and Chrome, but not on my mobile browser (Galaxy S2)跨浏览器字体宽度。适用于 IE 和 Chrome，但不适用于我的移动浏览器 (Galaxy S2)
【发布时间】：2012-09-30 01:32:51
【问题描述】：

帮助！此框的大小与 IE 和 Chrome 上 100% 缩放时的文本长度完全相同。但是，当在我的手机上查看时，该框超出了文本的长度。有可能解决这个问题吗？

<style type="text/css">
#box{
width:375px;
background:blue;
font-size:16px;
font-family:Courier New, Courier, monospace;
}

#textbox{
background:pink;
font-size:16px;
font-family:Courier New, Courier, monospace;
}
</style>

<html>
<head>
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</head>
</html>

【问题讨论】：

就我个人而言，我会说永远不要依赖字体宽度，除非您可以控制所有可以看到它的设备和浏览器。你永远不知道什么时候会渲染出比预期更宽的像素。
为什么要设置盒子宽度？让内容决定宽度。我认为这个问题很可能会发生，因为其中一个浏览器使用了不同的字体。即两个使用 Courier New，一个使用 Courier。
感谢您的快速响应，埃里克。遗憾的是，它是一个更大的 css 动画项目的一部分，我已经决定对元素使用绝对定位。
当我放大 Chrome 和 IE 时也会出现此问题。

标签： css mobile fonts size width

【解决方案1】：

首先，浏览器会以不同的方式解释字体宽度。依靠字体的宽度并不理想。

相反，如果您希望框匹配相同的宽度，请将<div> 包裹在它们周围并设置它。

<div class="wrapper">
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</div>

您发布的代码还有其他一些问题。

您必须将嵌入的样式放在 head 标签内。
你不能在<html>标签之前放置任何东西，除了<!doctype>
永远不要把<div> 放在脑袋里面。他们只属于<body>

<head> 用于初始化数据。 <body> 用于显示数据。

【讨论】：