我有一个div,背景是一张纸,我想用一些段落写在纸上。我已将页边距设置为零,行间距设置为 25.5px,这在 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/
编辑:添加了实时版本。
最佳答案
可能您没有为 margin、padding、line-height 和此类属性重置初始值...所以浏览器的行为不同。 可以肯定的是,一个一个地检查元素,看看它们从哪里继承了它们的样式。
谷歌“CSS 重置”了解更多信息。 您可以从这里获得一些预写的重置: cssreset.com 或者编写您自己的最小版本。
编辑:
同时向 #paper
元素添加一个固定的背景尺寸。
关于css - 为什么行距不一样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46139107/