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

正如您在此Picture中看到的那样，两个浏览器如何呈现这一点有所不同！我将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可能存在问题。您是否尝试重置p上的行高？

p {line-height: 1.2;}

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

body {line-height: 1.2;}

Answer 3

在播放孩子的偏移之前，将父位置设置为相对位置。因为您已将所有子元素设置为绝对值，所以它们将继续查找层次结构以关联自身，如果父元素未设置为相对，则它们将一直向上移动到body标记。

 #text_head {
        position: relative; 
    }

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

3 个答案: