个人中心
gpt4 book ai didi

html - 从 Firefox 到 Chrome 的文本差异

转载 作者：行者123 更新时间：2023-11-28 10:39:01 25 4
gpt4 key购买 nike 

       <div id="slide1">            
       <span id="tf1">BUILDING YOUR HOME <br>TO BE COMFY AND WARM</span>
       </div> 

#tf1 {
opacity: 0.9;
line-height: 50px;
text-align: center;
display: block;
color: /*#505050*/ #505050; 
text-shadow: /*#a8a8a8*/#9f9f9f -2px 1px 1px; 
font-size: 41px; 
font-family: Globerb;
}
#tf1::first-line {
color: /*#323232*/ #323232; 
text-shadow: /*#969696*/#8c8c8c -2px 1px 1px; 
font-size: 60px; 
font-family: Globerb;
display: block;
}
#slide1 {
/*transform: skew(0deg, 5deg);*/
opacity: 0;
position: absolute; 
padding-top: 40px; 
margin-left: 19.7916%;
margin-top: 0px;
}

问题是在 firefox 中，文本看起来不错，只有 2 行，仅此而已，但在 chrome 中，它变成了三行。我不知道这是为什么，但我想可以通过 css 进行某种修复？

最佳答案 

<html>
<head>
    <style>
        #tf1 {
opacity: 0.9;
line-height: 50px;
text-align: center;
display: block;
color: /*#505050*/ #505050; 
text-shadow: /*#a8a8a8*/#9f9f9f -2px 1px 1px; 
font-size: 41px; 
font-family: Globerb;
}
#tf1::first-line {
color: /*#323232*/ #323232; 
text-shadow: /*#969696*/#8c8c8c -2px 1px 1px; 
font-size: 60px; 
font-family: Globerb;
display: block;
}
#slide1 {
/*transform: skew(0deg, 5deg);*/
opacity: 0;
position: absolute; 
padding-top: 40px; 
margin-left: 19.7916%;
margin-top: 0px;
}
    </style>
</head>
<body>
<p id="tf1">BUILDING YOUR HOME <br>TO BE COMFY AND WARM</p>
</body>
</html>

Chrome enter image description here火狐

enter image description here

即enter image description here

关于html - 从 Firefox 到 Chrome 的文本差异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23214726/

25 4 0
文章推荐： json - 如何解码包含数组 Swift 4 的 JSON 文件？
文章推荐： javascript - 如何使用 VeeValidate (Vue.Js) 上的字典自定义 "required"错误消息
文章推荐： ios - UIScrollView 的 subview 保持在同一位置，而 UIScrollView 垂直滚动
文章推荐： javascript - 如何使用正则表达式从字符串中检索电子邮件地址和姓名并将其插入到 HTML 表中？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com