html - 位置：不同浏览器上的绝对问题

Question

我有一个定位的绝对 div，其中将附加文本

<div id="text_head">
   <p class="dot">·</p>
   <div class="line"></div>
   <div class="line"></div>   
   <p id="p_head">Here is my</p>
   <p id="p_sub">WEB DESIGN</p>
</div>

和下面的CSS

.dot {
    color: #FFFFFF;
    font-size: 80px;
    left: 131px;
    position: absolute;
    top: 22px;
 }

  .line { 
    background-color: #FFFFFF;
    height: 2px;
    position: absolute;
    right: 0;
    top: 67px;
    width: 118px;
 }  

正如您在这张图片中看到的，两个浏览器的渲染方式有所不同！我将margin: 0px和padding: 0px设置为p元素的默认样式！

任何帮助将非常感激！编辑额外的CSS：

p { margin: 0;
    padding: 0;
    color: #FFF; 
    }

#p_head { 
    font-family: impregnable_personal_use_onRg;
    font-size: 74px;
    margin: 0;
    padding: 0;
     }  

#p_sub { 
    font-family: alternategothic2_btregular;
    font-size: 54px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
     }

Answer 1

你能发布你的整个 html/css 文件吗？我将您的代码粘贴到编辑器中，但页面呈现与您的屏幕截图非常不同。

顺便说一句，如果你还没有嵌入网络字体，我建议你使用@font-face 属性，这样你的排版在不同设备上看起来都是一样的。:)

Answer 2

可能有问题line-height。您是否尝试过重置 line-height on p？

p {line-height: 1.2;}

或者您可以重置所有行高：

body {line-height: 1.2;}

Answer 3

在使用孩子的偏移量之前将父位置设置为相对。因为您已将所有子元素设置为绝对，所以它们将继续查找层次结构以关联自己，如果父元素未设置为相对，它们将一直到 body 标签。

 #text_head {
        position: relative; 
    }