2017-09-10 1 views
0

J'ai une div avec un fond d'un morceau de papier et je voudrais utiliser quelques paragraphes pour écrire sur les lignes du papier. J'ai mis les marges à zéro et j'ai l'interlignage réglé à 25.5px et cela fonctionne parfaitement sur Firefox mais sur Chrome. Y a-t-il une raison spécifique pour laquelle?Pourquoi l'interligne n'est-il pas le même?

Voici une image des deux côte à côte: https://cdn.discordapp.com/attachments/172018499005317120/356360953392136192/unknown.png

Et voici un peu de code:

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

Voici une version en direct si nécessaire: http://lano-project.org/update/home/

EDIT: Ajout de la version en direct.

Répondre

0

Vous n'avez probablement pas réinitialisé les valeurs initiales de marge, de remplissage, de hauteur de ligne et de tels attributs ... Les navigateurs agissent donc différemment. Pour être sûr, inspecter les éléments un par un et voir qu'ils héritent de leurs styles d'où.

Google "CSS reset" pour plus d'informations. Il existe une réinitialisation pré-écrite, vous pouvez obtenir ces à partir d'ici: cssreset.com Ou écrire votre propre version minimale.

Edit:

ajouter également une taille fixe arrière-plan à l'élément #paper.

+0

Après l'ajout d'une réinitialisation css, il semble avoir aidé certains, mais il est encore un peu comme le chrome ajoute un pixel à chaque ligne. Pensez-vous que la police personnalisée est en train de tout gâcher? –

+0

Non, je crois que c'est à cause des ratios (hauteur de l'image de fond à hauteur de ligne -> 946 ÷ 25.5 = 37.09 pixels) Nombre a des décimales, Il y a aussi un espace supplémentaire avant la première ligne une application de croquis. Le problème est l'arrière-plan. – Pooria