网站在浏览器中显示不同

Question

我有一个项目，我们要创建我们的工作组合。 但问题是：

如果您查看my site，请按“关于”链接，显示的标签底部。

Chrome在Chrome和Firefox中的表现不同。 在IE和Firefox中，选项卡底部的文本被切断，而在Chrome中则没有。

我试图在所有3个浏览器中使用开发工具，并试图找到问题，但我不能。 我希望你们中的一些人可以帮我找到它。

我没有包含jsFiddle，因为我不确定问题所在。

Answer 1

每个浏览器都有一个略有不同的原生样式系统，你必须要小心。

例如，Firefox使用＆＃34; gecko：＆＃34;

  

-moz-appearance CSS属性在Gecko（Firefox）中用于使用基于操作系统主题的平台本机样式显示元素。

因此，Firefox使用Gecko，Chrome使用Webkit，IE使用自己的系统。每个都略有不同，你必须在你的CSS中考虑到这一点。

在尝试完成像transition这样更复杂的CSS3样式时，我会尝试坚持常规css并使用浏览器特定的CSS。

Answer 2

我不确定你是否已经这样做，因为我无法查看你的CSS文件，但在CSS文件中有一个 CSS重置样式是很好的做法。您可以通过将所有基本规则（如边距，填充，边框，字体大小，字体，纵向对齐和显示）重置为默认值（如 0 ，阻止，继承， 100％。您可以使用*（星号）来设置所有标签的样式，或者将它们全部列出，用逗号分隔。这样做的原因是因为默认情况下每个浏览器都有自己的设置样式，这可能会覆盖您自己的样式并导致您网站中不必要的干扰。这是一个很好的做法。

Answer 3

尝试更改.target类位置值并查看正在发生的更改。还可以尝试添加相应的边距值。发生的事情是你的页脚有一个比你的身体更高的z指数，这使得它想要掩盖它上面溢出的任何东西。

Answer 4

并非所有浏览器都使用相同的渲染引擎或遵循相同的规则。这就是为什么它们在你的情况下看起来都不同。 Opera浏览器实际上最符合HTML准则。不幸的是，它们并不总是呈现相同的，对于开发人员而言它始终是一个问题。我会尽可能使用严​​格的CSS，因为浏览器往往更好地遵循更严格的CSS规则。

希望这有帮助。祝你好运。