Question

       <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有某种修复方法？

Answer 1

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

铬 enter image description here 火狐

enter image description here

即 enter image description here

从Firefox到Chrome的文字差异

1 个答案: