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

帮助！此框与IE和Chrome上100％缩放的文字长度大小完全相同。但是，当在我的手机上观看时，盒子突出了文本的长度。有没有可能解决这个问题？跨浏览器字体宽度。适用于IE和Chrome，但不适用于我的手机浏览器（Galaxy S2）

<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>

来源

2012-10-09 Jennifer Lost

就个人而言，我会说永远不要依赖字体宽度，除非你有控制所有设备和浏览器，它将被视为。你永远不知道什么时候某个像素会被渲染得比它应该的宽。 – Eric

为什么设置框的宽度？让内容决定宽度。我认为这个问题很可能发生，因为其中一个浏览器正在使用不同的字体。即两个使用Courier New，一个使用Courier。 –

感谢您的快速响应，埃里克。令人遗憾的是，它是一个更大的css动画项目的一部分，我已经决定对元素使用绝对定位。 –

首先，浏览器将不同地解释字体宽度。依靠字体的宽度并不理想。

取而代之的是，如果您希望方框匹配相同的宽度，请围绕它们包围<div>并进行设置。

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

您发布的代码存在其他一些问题。

您必须将您的嵌入式样式放在head标签内。
你千万不要放任何物品<html>标记之前，除了<!doctype>
不要把<div>的头内。它们只属于<body>

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

来源

2012-10-10 18:11:23 AJStacy

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

回答

相关问题