Html 从Firefox到Chrome的文本差异建造舒适温暖的家 #tf1{ 不透明度：0.9；线高：50px；文本对齐：居中；显示：块；颜色：/*#505050*/#505050；文本阴影：/*#a8a8a8*/#9f9f9f-2px 1px 1px；字体大小：41px；字体系列：Globerb； } #tf1:：一线{ 颜色：/*#323232*/#323232；文本阴影：/*#969696*/#8c8c8c-2px 1px 1px；字体大小：60px；字体系列：Globerb；显示：块； } #幻灯片1{ /*变换：倾斜（0度，5度）*/ 不透明度：0；位置：绝对位置；填充顶部：40px；左缘：19.7916%；边际上限：0px； }_Html_Css

Html 从Firefox到Chrome的文本差异建造舒适温暖的家 #tf1{ 不透明度：0.9；线高：50px；文本对齐：居中；显示：块；颜色：/*#505050*/#505050；文本阴影：/*#a8a8a8*/#9f9f9f-2px 1px 1px；字体大小：41px；字体系列：Globerb； } #tf1:：一线{ 颜色：/*#323232*/#323232；文本阴影：/*#969696*/#8c8c8c-2px 1px 1px；字体大小：60px；字体系列：Globerb；显示：块； } #幻灯片1{ /*变换：倾斜（0度，5度）*/ 不透明度：0；位置：绝对位置；填充顶部：40px；左缘：19.7916%；边际上限：0px； }

html css

Html 从Firefox到Chrome的文本差异建造舒适温暖的家 #tf1{ 不透明度：0.9；线高：50px；文本对齐：居中；显示：块；颜色：/*#505050*/#505050；文本阴影：/*#a8a8a8*/#9f9f9f-2px 1px 1px；字体大小：41px；字体系列：Globerb； } #tf1:：一线{ 颜色：/*#323232*/#323232；文本阴影：/*#969696*/#8c8c8c-2px 1px 1px；字体大小：60px；字体系列：Globerb；显示：块； } #幻灯片1{ /*变换：倾斜（0度，5度）*/ 不透明度：0；位置：绝对位置；填充顶部：40px；左缘：19.7916%；边际上限：0px； },html,css,Html,Css,问题是，在firefox中，文本看起来只有两行，仅此而已，但在chrome中，它有三行。我不知道这是为什么，但我想有一个通过css的某种修复？ <div id="slide1"> <span id="tf1">BUILDING YOUR HOME <br>TO BE COMFY AND WARM</span> </div> #tf1 { opacity: 0.9; l

问题是，在firefox中，文本看起来只有两行，仅此而已，但在chrome中，它有三行。我不知道这是为什么，但我想有一个通过css的某种修复？


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

#tf1{
不透明度：0.9；
线高：50px；
文本对齐：居中；
显示：块；
颜色：/*#505050*/#505050；
文本阴影：/*#a8a8a8*/#9f9f9f-2px 1px 1px；
字体大小：41px；
字体系列：Globerb；
}
#tf1:：一线{
颜色：/*#323232*/#323232；
文本阴影：/*#969696*/#8c8c8c-2px 1px 1px；
字体大小：60px；
字体系列：Globerb；
显示：块；
}
#幻灯片1{
/*变换：倾斜（0度，5度）*/
不透明度：0；
位置：绝对位置；
填充顶部：40px；
左缘：19.7916%；
边际上限：0px；
}
建造舒适温暖的家

铬火狐

你得试试！你可以试试这个

让你的家变得舒适温暖的方法，它在Chrome、firefox和IE中运行良好，没有添加任何CSS。一个有效的方法：/ajaja我找到的唯一修复方法，我似乎不想修复，就是给slide1指定一个固定的宽度。-所以问题是chrome以某种方式包装了我的文本。我会在一个你可以检查的答案中附加屏幕短片

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