帮助!此框与 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>
最佳答案
首先，浏览器对字体宽度的解释不同。依靠字体的宽度并不理想。
相反，如果您希望框匹配相同的宽度，请在它们周围包裹一个 <div> 并设置它。
<div class="wrapper">
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</div>
您发布的代码还有其他一些问题。
- 您必须将嵌入的样式放在 head 标签内。
- 除了
<html>之外，您绝不能在<!doctype>标签前放置任何内容 - 永远不要把
<div>放在脑袋里。它们只属于<body>
<head> 用于初始化数据。 <body> 用于显示数据。
关于css - 跨浏览器字体宽度。适用于 IE 和 Chrome，但不适用于我的移动浏览器 (Galaxy S2)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12804777/