跨浏览器字体宽度。适用于 IE 和 Chrome，但不适用于我的移动浏览器 (Galaxy S2)
Posted
技术标签:
【中文标题】跨浏览器字体宽度。适用于 IE 和 Chrome，但不适用于我的移动浏览器 (Galaxy S2)【英文标题】：Cross Browser Font Width. Works in IE and Chrome, but not on my mobile browser (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 时也会出现此问题。 【参考方案1】：首先，浏览器会以不同的方式解释字体宽度。依靠字体的宽度并不理想。
相反，如果您希望框匹配相同的宽度，请将<div> 包裹在它们周围并设置它。
<div class="wrapper">
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</div>
您发布的代码还有其他一些问题。
-
您必须将嵌入的样式放在 head 标签内。
你不能在
<html>标签之前放置任何东西，除了<!doctype>
永远不要把<div> 放在脑袋里面。他们只属于<body>
<head> 用于初始化数据。 <body> 用于显示数据。
【讨论】：
以上是关于跨浏览器字体宽度。适用于 IE 和 Chrome，但不适用于我的移动浏览器 (Galaxy S2)的主要内容，如果未能解决你的问题，请参考以下文章
CSS：Chrome 和 Safari 似乎为宽度“添加”边框，而 IE、Firefox 和 Opera 没有
日期选择器 html5 标记不适用于 Mozilla、IE 浏览器。但它仅适用于 Chrome
图像的最大宽度不适用于 IE 11 的 flexbox，但适用于谷歌浏览器
CSS 适用于所有浏览器，IE，Firefox，Opera，Safari和Google Chrome的透明度设置的简单CSS代码