Question

帮助！此框与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>

Answer 1

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

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

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

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

您必须将嵌入的样式放在头标记内。
除<html>

<!doctype>

永远不要将<div>放在头脑中。它们只属于<body>

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

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

1 个答案: