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

Question

我制作了一个关于星球大战佳能时间表（有电影，电视节目，书籍和漫画）的网站，我有一个小问题。

Chrome / Opera / Vivaldi有不同的＆lt; BR＆GT;标记高度与Firefox相比，它破坏了我的强迫症。

有没有什么方法可以让网站在Firefox上看起来和在Chrome / Opera / Vivaldi上一样？

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

Answer 1

^{_{是的，我也有强迫症，并且确实对这种不完美感到沮丧。}}

您可以使用CSS设置<br>的样式：

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

或由@Raj Kumar在之前的回答中提供的内嵌样式：

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

在此处尝试使用代码段：

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

如果这不起作用，我建议你做的就是完全省略<br>标签并添加 margin ，padding ，或隐藏的边界（border: 2px groove transparent;）到你正在分离的元素。另一种不那么简洁的方法是添加透明的div（div.class {background: transparent; width: 100%; height: 2px;}）。

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

^{_{感谢您告诉我有关Vivaldi的信息。看起来像一个不错的浏览器！}}

Answer 2

您可以尝试标准化以下css是链接http://necolas.github.io/normalize.css/

它将解决跨浏览器问题的其他问题

Answer 3

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

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

Answer 4

您可以尝试使用

• reset.css
• normalize.css
• vanilla.css

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