Firefox 和其他浏览器之间的 高度不同答案

【问题标题】：Different height between Firefox and other browsersFirefox 和其他浏览器之间的 高度不同
【发布时间】：2018-06-19 19:16:34
【问题描述】：

我创建了一个关于《星球大战佳能》时间线的网站（包含电影、电视节目、书籍和漫画），但我遇到了一个小问题。

Chrome/Opera/Vivaldi 与 Firefox 相比具有不同的
标签高度，它粉碎了我的强迫症。

有什么方法可以让网站在 Firefox 上的外观与在 Chrome/Opera/Vivaldi 上的外观相同？

如果我没有被理解，我很抱歉，这是一个截图：http://i.imgur.com/XmT2M64.png

【问题讨论】：

使用 html5 中断： 
通过 CSS 强制它具有相同的大小。看看这个：stackoverflow.com/questions/1409649/…
不要使用   来增加文本行之间的间距； 使用 CSS 边距属性或  元素。来源：developer.mozilla.org/en-US/docs/Web/HTML/Element/br
@gmo 他说的我也完全同意。

标签： html css

【解决方案1】：

^{_{是的，我也有强迫症，对这些缺陷感到非常沮丧。}}

您可以使用 CSS 为您的   设置样式：

br {
  line-height: 2rem;
  height: 2rem;
}

或通过@Raj Kumar 在上一个答案中提供的内联样式：

<br style="line-height: 2rem; height: 2rem;" />

在此处尝试 sn-p：

<br style="line-height: 10px; height: 10px;">
<!-- I used 10px to emphasise the height. You can use !important, too, if your code is not obedient. See? It works.-->

如果这不起作用，我建议您完全忽略   标签并添加 margin、padding 或不可见边框（@ 987654330@) 到您要分离的元素。另一种不太简洁的方法是添加透明的div (div.class {background: transparent; width: 100%; height: 2px;})。

^{您可能想尝试在 标记中添加/（以防万一）（尽管大多数现代浏览器已经支持 ）。确保您的代码中也没有任何额外的空格（只是为了整洁）。也尝试导入normalize.css 或vanilla.css 并检查是否解决了问题。}

^{_{感谢您让我了解维瓦尔第。看起来不错的浏览器！}}

【讨论】：

用br { line-height: 2rem; height: 2rem; } 尝试了你的版本，但它使 br 变大了很多。
这只是一个例子。您可以将值更改为您想要的高度（例如2px、0.33rem、3mm、0.1cm 等）。
是的，我知道那是一个例子，我不明白的是值，以前从未使用过“rem”。
哦！ CSS3 引入了一些新的单位，包括代表“根 em”的 rem 单位。 em 单位是相对于父级的字体大小的，这会导致复合问题...
  的 HTML 中没有右斜线。虽然允许，但它没有任何意义，什么都不做，并且规范指示浏览器忽略它。

【解决方案2】：

您可以尝试规范化下面的 css 链接 http://necolas.github.io/normalize.css/

解决其他跨浏览器问题

【讨论】：

【解决方案3】：

为 br 添加样式它应该可以完美地检查这个

<br style="line-height:?px; height:?px" />

【讨论】：

不会改变任何东西，它的作用完全一样
给行高和行高一些像素。
我可以得到页面的演示链接

【解决方案4】：

你可以试试

reset.css
normalize.css
vanilla.css

允许根据您的要求重置所有或特定元素。

【讨论】：