【问题标题】:Why are the line spacing not the same?为什么行距不一样?
【发布时间】:2017-09-10 18:07:37
【问题描述】:

我有一个带有一张纸背景的 div,我想用一些段落写在纸上。我已将边距设置为零,并将行距设置为 25.5 像素,这在 Firefox 上运行良好,但在 Chrome 上运行良好。有什么具体原因吗?

这是两人并排的图片:https://cdn.discordapp.com/attachments/172018499005317120/356360953392136192/unknown.png

这里有一点代码:

HTML

<div id="paper">
    <h1>LANO Project</h1>
    <p>Welcome to the 5th rebuild of LANO Project. I hope you like all of the upgrades that have been going on. I have worked very hard on this update to make it look very clean and avaliable for the future. I tried my best to address issues that I have noticed in the past while pushing a fun interface for the user while still making it easy for the developer to add, update, change, and sometimes remove things. I was going for a 90's theme, things that you find in the 90's.</p>
    <p>In future updates (hopefully thoses exist) I will be adding a few more entirely unnessissary physics to some of the elements found in this website. I really want my own website (this one) to be a great example of what I can do / make as a webdeveloper. I will also be adding any games I make on this site.</p>
    <p>To get started just click on the tiles in the navigation bar.</p>
</div>

CSS

#paper{
    background: url("../home/paper.png");
    margin-left: auto;
    margin-right: auto;
    width: 658px;
    height: 946px;
}
#paper h1{
    margin: 0px;
    color: #333333;
    font-size: 36px;
    padding-top: 75px;
    padding-left: 110px;
    padding-right: 30px;
    padding-bottom: 16px;
    font-family: 'write_bold';
}
#paper p{
    margin:0px;
    line-height: 1.1;
    font-size: 20px;
    color: #333333;
    text-indent: 20px;
    padding-left: 103px;
    padding-right: 30px;
    font-family: 'write';
}

如果需要,这里是一个实时版本:http://lano-project.org/update/home/

编辑:添加了实时版本。

【问题讨论】:

    标签: css google-chrome firefox


    【解决方案1】:

    可能您没有重置边距、填充、行高和此类属性的初始值...所以浏览器的行为不同。 可以肯定的是,逐个检查元素并查看它们从何处继承样式。

    谷歌“CSS 重置”了解更多信息。 您可以从这里获得一些预先编写的重置: cssreset.com 或者编写您自己的最小版本。

    编辑:

    同时为#paper 元素添加一个固定的背景尺寸。

    【讨论】:

    • 添加css重置后似乎有所帮助,但它仍然有点像chrome正在为每行添加一个像素。你认为自定义字体搞砸了吗?
    • 不,我相信这是因为比率(背景图像高度与行高 -> 946÷25.5 = 37.09 像素)数字有小数,第一行之前还有一个额外的空间所以首先您应该在草图应用程序中测量背景图像。问题在于背景。
    猜你喜欢
    • 2015-12-26
    • 2020-12-03
    • 1970-01-01
    • 2015-07-20
    • 1970-01-01
    • 2016-03-22
    • 1970-01-01
    • 2011-12-25
    • 2011-11-15
    相关资源
    最近更新 更多