1

帮助！此框的大小与 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>
4

1 回答 1

1

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

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

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

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

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

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

于 2012-10-10T18:11:23.937 回答