问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

top在火狐浏览器中显示不正常。

头像
x_hola
    66617121145
    <html>
<style>
.subtitle
    {
        width:100%;
        height:32px;
        position:absolute;
    }
.subtitle1
    {
        width:4px;
        height:32px;
        position:absolute;
        background-color:red;
    }

.subtitle p
    {
        position:absolute;
        top:4px;
        left:10px;
        font-size:24px;
    }
*{margin:0;border:0;padding:0;}
</style>

<div class='subtitle'>
    <div class='subtitle1'></div>
    <p>景观</p>
</div>

</html>

    这是IE的效果，是我想要的。
    图片描述

    这是ff的效果，如何让火狐上和IE显示一致？
    ![图片描述][2]

    css
    阅读 4k
    3 个回答
    得票最新
    头像
    zonxin
      12.1k3632
      ✓ 已被采纳

      因为 firefox 默认的不是宋体，你改成你把字体改成宋体就好了。

      你想要的这种对齐真的不好不太好实现，因为显示文字时候的位置与字体设计时候设计的值有关系。一个字的摆放位置与设计字体时设计的值有关系
      因此，p 的的高度不仅与字号有关而且与字体有关。另外，一个字的范围CSS2.1里面并没有规定浏览器如何计算，只是推荐了两种可选的方式，不同浏览器可能不同。
      像这种情况只能根据字体字号慢慢调整。
      图片描述

      头像
      timeswind
        38113

        去掉絕對定位試試

        头像
        golden_freeman_china
          1.8k1211
          <html>
<style>
.subtitle
    {
        width:100%;
        height:32px;
        position:absolute;
        border-left:4px solid red;
        font-size:24px;
        line-height:32px;
    }
*{margin:0;border:0;padding:0;}
</style>

<div class='subtitle'>
    景观
</div>

</html>

          写好的CSS，DOM结构不用很复杂；PS：度娘一下奥卡姆剃刀；

          更新：

          <html>
<style>
.subtitle
    {
        width:100%;
        height:32px;
        position:absolute;
    }
.subtitle1
    {
        width:4px;
        height:32px;
        position:absolute;
        background-color:red;
    }

.subtitle p
    {
        display:block;
        position:absolute;
        top:4px;
        left:10px;
        font-size:24px;
        height:24px;
        line-height:24px;
        overflow:hidden;
        vertical-align:text-top;
    }
*{margin:0;border:0;padding:0;}
</style>

<div class='subtitle'>
    <div class='subtitle1'></div>
    <p>景观</p>
</div>

</html>

          这个是你要的了啊？

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题