gpt4 book ai didi

css - 跨浏览器字体宽度。适用于 IE 和 Chrome,但不适用于我的移动浏览器 (Galaxy S2)

转载 作者:行者123 更新时间:2023-11-28 18:35:41 25 4
gpt4 key购买 nike

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

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

  1. 您必须将嵌入的样式放在 head 标签内。
  2. 除了 <html> 之外,您绝不能在 <!doctype> 标签前放置任何内容
  3. 永远不要把 <div> 放在脑袋里。它们只属于 <body>

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

关于css - 跨浏览器字体宽度。适用于 IE 和 Chrome,但不适用于我的移动浏览器 (Galaxy S2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12804777/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com