开发者社区> 问答> 正文

请教浏览器文字兼容性问题。

screenshot
火狐中就有了问题,代码如下:

<div class="yuan2">

<p>2014.08-2015.02</p>

</div>

<div class="fang2">

<div class="sanjiao2"></div>
<div class="xfang2">
<p>火星人教育<br/><br/>
   学习web前端</p>
</div>

</div>

.yuan2{

width: 90px;
height: 90px;
border-radius: 50%;
background: #cd3738;
position: absolute;
left: 329px;
top: 494px;
transition: all 1s;
-webkit-animation: yuan1 ease-in-out 1s backwards;
-webkit-animation-delay: 9.5s;
opacity: 1;
}

.yuan2 p{ font-weight:bold;

      text-align:center;
      color:#EEE; 
      margin-top:26px;
      text-shadow: 1px 3px 3px #000000; }

.fang2{

width: 256px;
height: 120px;
position: absolute;
left: 60px;
top: 481px;
-webkit-animation: fang2 ease-in-out 2s backwards;
-webkit-animation-delay: 10s;
opacity: 1;

}

.sanjiao2{ width:0;

       height:0;
       border-top:13px solid transparent;
       border-left:13px solid  #cd3738;
       border-bottom:13px solid transparent;
       margin-top:50px;
       margin-left:240px;
       }
       

.xfang2{

width: 239px;
height: 120px;
background: #cd3738;
border-radius:15px;
position: absolute;
left: 1px;
top: 1px;

} 
.xfang2 p{font-weight:bold;

      text-align:center;
      color:#EEE; 
      margin-top:26px;
      text-shadow: 1px 3px 3px #000000;}

展开
收起
杨冬芳 2016-06-14 19:42:14 2382 0
2 条回答
写回答
取消 提交回答
  • 需要设置white-spacing来断行。

    2019-07-17 19:38:31
    赞同 展开评论 打赏
  • 因为你没有设置"font-family"属性,所以浏览器会使用自己默认的字体属性来渲染页面文字。
    chrome和firefox默认的字体属性是不一样的,所以展现出来的样式会不一样。

    你可以在body中添加样式:

    font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;
    2019-07-17 19:38:31
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
WEB浏览器中即将发生的安全变化 立即下载
基于浏览器的实时构建探索之路 立即下载
基于浏览器的实时构建探索之路--玄寂 立即下载