2017-09-10 17 views
0

私は、紙のバックグラウンドを持つ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/

EDIT:ライブバージョンが追加されました。

答えて

0

おそらく、margin、padding、line-heightなどの属性の初期値をリセットしていない可能性があります。ブラウザは異なる動作をするでしょう。 要素を1つずつ検査し、どこからスタイルを継承するかを確認してください。

詳細については、Googleの「CSSリセット」をご覧ください。 プリエンプトされたリセットがありますので、こちらから入手できます: cssreset.com あなた自身の最小バージョンを作成してください。

編集:

また#paper要素に固定されたバックグラウンド・サイズを追加します。

+0

CSSのリセットを追加した後、いくつかの助けになったようですが、まだクロムのように、各行にピクセルを追加しているようです。あなたはカスタムフォントがそれを台無しにしていると思いますか? –

+0

いいえ、それは比(背景画像の高さを線の高さ - > 946÷25.5 = 37.09ピクセル)のためだと思います。数字に小数点があります。また、最初の行の前に余分なスペースがあります。スケッチアプリ。問題は背景です。 – Pooria

関連する問題