FirefoxとChromeの行の高さが異なる理由を教えてください。

Question

Matthew Pennellのソリューション（CSS Tricksのcodepen）に基づいて複数行のテキストを作成しました。クロムではすべてうまく見えますが、Firefoxの高さのスパン要素は、祖先の高さよりも大きくなります。 Firefoxの場合、の垂直パディングをに調整すると、Chromeで同じ問題が発生し、逆も同様です。

それが起こるのはなぜ？この問題の本当の技術的な理由は何ですか？

HTMLコード：

<div class="padded-multiline"> 
    <h1> 
    <strong>How do I add padding to subsequent lines of an inline text element?</strong> 
    </h1> 
</div> 

CSSコード：強い上line-height: 1;を設定

:root { 
    font-family: Arial, sans-serif; 
    font-size: 20px; 
} 
.padded-multiline { 
    line-height: 1.3; 
    padding: 2px 0; 
    border-left: 20px solid #c0c; 
    width: 400px; 
    margin: 20px auto; 
} 
.padded-multiline h1 { 
    background-color: #c0c; 
    padding: 4px 0; 
    color: #fff; 
    display: inline; 
    margin: 0; 
} 
.padded-multiline h1 strong { 
    position: relative; 
    left: -10px; 
} 

Answer 1

残念ながら、完全でクリーンなクロスブラウザーの回避策はありません。異なるUAがテキストを異なるようにレンダリングするので、各テキストラインの高さは少し高くなることがあります。そこで、必要なボックスサイズのSCSS計算に基づいたソリューションを作成し、オーバーフロープロパティを使用してアーティファクトを非表示にします。 http://codepen.io/ifiri/pen/ygEeeL

HTML：：

<p class="multiline-text"> 
    <span class="multiline-text__wrapper multiline-text__wrapper--outer"> 
     <span class="multiline-text__wrapper multiline-text__wrapper--left"> 
      <span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span> 
     </span> 
    </span> 
</p> 

SCSS：

/* 
Variables 
*/ 
$base-line-height: 1.75; 
$base-font-size: 1.25em; 

$multiline-padding-base: ($base-line-height/2) * 1em; 
$multiline-padding-horizontal: $multiline-padding-base; 
$multiline-padding-vertical: $multiline-padding-base - (1em/2); 

$multiline-bg-color: #a5555a; 
$multiline-font-color: #fff; 

/* 
= Snippet Styles 
This code is required 
*/ 
.multiline-text { 
    color: $multiline-font-color; 

    padding: 0px $multiline-padding-horizontal; 

    // hide line-height artefacts 
    overflow: hidden; 
    position: relative; 
} 
.multiline-text__wrapper { 
    background-color: $multiline-bg-color; 
    padding: $multiline-padding-vertical 0px; 
} 
.multiline-text__wrapper--outer { 
    // Inner padding between text lines 
    line-height: $base-line-height; 
} 
.multiline-text__wrapper--left { 
    position: relative; 
    left: -($multiline-padding-horizontal); 
} 
.multiline-text__wrapper--right { 
    position: relative; 
    right: -($multiline-padding-horizontal/2); 
} 

Answer 2

問題がまた私のコメントを読んで修正します。

Answer 3

タイトルと同じ効果を得るには、アウトラインのみを使用してください。 H1は強く必要ありません。ここで

.padded-multiline { 
 
    line-height: 1.3; 
 
    padding: 2px 0; 
 
    width: 400px; 
 
    margin: 20px auto; 
 
} 
 
.padded-multiline h1 { 
 
    background-color: #c0c; 
 
    padding:1px; 
 
    color: #fff; 
 
    display: inline; 
 
    outline: 10px solid #c0c; 
 
    margin: 0; 
 
    font-size:16px; 
 
}

<div class="padded-multiline"> 
 
    <h1>How do I add padding to subsequent lines of an inline text element?</h1> 
 
</div>

codepenさ：http://codepen.io/anon/pen/vgRvjM

あなたは（つまり、上下からあまり紫色の空間を意味、あなたは後にして前から例のボーダーのために使用することができます）を正確に視覚的な必要がある場合：この解決のための

.padded-multiline:before{ 
    content:''; 
    display:block; 
    border:5px solid #fff; 
    position:relative; 
    left:-10px; 
    top:-3px; 
} 
.padded-multiline:after{ 
    content:''; 
    display:block; 
    border:5px solid #fff; 
    position:relative; 
    left:-10px; 
    bottom:-3px; 
} 

Codepen：http://codepen.io/anon/pen/QdmzxK

Answer 4

ChromeとFirefoxは異なる使用するようだ。ここ

は、あなたが同じ問題を満たしていれば、私の解決策でありますテキストレイアウトシステム。 Chromeではline-heightという属性があり、Firefoxは正しいものを使用しているようです。