Fatal编程技术网
  • html/
  • Html 为什么Firefox和Chrome中的线条高度不同？

Html 为什么Firefox和Chrome中的线条高度不同？

html css google-chrome firefox

Html 为什么Firefox和Chrome中的线条高度不同？,html,css,google-chrome,firefox,Html,Css,Google Chrome,Firefox,我根据Matthew Pennell的解决方案（通过CSS技巧）创建了多行填充文本。在Chrome中，一切看起来都很好，但在Firefox中，span元素的高度大于其祖先的高度。若我调整Firefox的垂直填充，在Chrome中也会出现同样的问题，反之亦然 为什么会这样？这个问题的真正技术原因是什么 HTML代码： <div class="padded-multiline"> <h1> <strong>How do I add padding t

我根据Matthew Pennell的解决方案（通过CSS技巧）创建了多行填充文本。在Chrome中，一切看起来都很好，但在Firefox中，span元素的高度大于其祖先的高度。若我调整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>

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

<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>

/* 
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);
}
设置
行高：1
on strong将解决此问题，请阅读我的评论。

设置
行高：1将解决此问题。请阅读我的评论。
要实现标题的相同效果，只需使用大纲即可。
H1不需要很强的稳定性



.padded多行{
线高：1.3；
填充：2px0；
宽度：400px；
保证金：20px自动；
}
.padded多行h1{
背景色：#c0c；
填充：1px；
颜色：#fff；
显示：内联；
外形：10px固体#c0c；
保证金：0；
字体大小：16px；
}



如何向内联文本元素的后续行添加填充？

要获得与标题相同的效果，只需使用大纲即可。
H1不需要很强的稳定性



.padded多行{
线高：1.3；
填充：2px0；
宽度：400px；
保证金：20px自动；
}
.padded多行h1{
背景色：#c0c；
填充：1px；
颜色：#fff；
显示：内联；
外形：10px固体#c0c；
保证金：0；
字体大小：16px；
}



如何向内联文本元素的后续行添加填充？

不幸的是，没有一个完整、干净的交叉浏览器解决方案。因为不同的UAs呈现的文本不同，所以每个文本行的高度可能会高一点（反之亦然）。因此，我创建了一个基于SCSS计算所需盒子大小的解决方案，并通过溢出属性隐藏人工制品

如果您遇到相同的问题，以下是我的解决方案：

HTML:


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



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



<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>



/* 
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);
}



不幸的是，没有一个完整而干净的交叉浏览器解决方案。因为不同的UAs呈现的文本不同，所以每个文本行的高度可能会高一点（反之亦然）。因此，我创建了一个基于SCSS计算所需盒子大小的解决方案，并通过溢出属性隐藏人工制品

如果您遇到相同的问题，以下是我的解决方案：

HTML:


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



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



<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>



/* 
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);
}



Chrome和Firefox似乎使用不同的文本布局系统。

在Chrome中，它将设置
行高属性，Firefox似乎使用了正确的属性。
Chrome和Firefox似乎使用了不同的文本布局系统。

在Chrome中，它将设置
行高属性，Firefox似乎使用了正确的属性。
您是否有CSS重置，即浏览器默认值是否会影响这一点？Firefox将跨距和其他元素（strong/u/em）视为具有自己行高的内联元素。正如@Paul所说的，您应该使用重置。@Paul开始使用CSS重置，但重置并没有修复它：chaveyoucss重置到位，即浏览器默认值是否会影响这一点？Firefox将跨距和其他元素（strong/u/em）视为具有自己行高的内联元素。正如@Paul所说，您应该使用重置。@Paul使用CSS reset进行了分叉，但reset没有修复它：cThanks，现在更好了，但前提是CSS reset不包括在内（fork）。在渲染机制上似乎有所不同，但很奇怪。谢谢，现在更好了，但前提是不包括css重置（fork）。在渲染机制上似乎有所不同，但这很奇怪。