网站在浏览器中的显示方式不同[关闭]答案

【问题标题】：Site is showing differently in browsers [closed]网站在浏览器中的显示方式不同[关闭]
【发布时间】：2015-04-06 01:12:57
【问题描述】：

我有一个项目，我们要在其中创建我们的作品集。但是问题来了：

如果您查看my site，然后点击显示的标签底部的“关于”链接。

它在 Chrome 中的行为与在 IE 和 Firefox 中的行为不同。在 IE 和 Firefox 中，标签底部的文本会被截断，而在 Chrome 中则不会。

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

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

【问题讨论】：

为什么投反对票？即使问题很大，问题也无效怎么办？
见：How to create a Minimal, Complete, and Verifiable example。

标签： jquery html css cross-browser

【解决方案1】：

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

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

【讨论】：

"Opera 浏览器实际上最好地遵守 HTML 准则"。依据什么标准？
@Oriol 根据 W3C 标准，Opera 浏览器是最符合标准的。这真的值得投反对票吗？大声笑...如果有的话，我认为我的回答值得一票。我解释了为什么 OP 会遇到这个问题，并建议帮助 OP 解决他的问题。
Opera 浏览器还显示了我应该如何设计我的网站，根据 chrome。感谢您提供信息。

【解决方案2】：

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

例如，Firefox 使用“gecko:”

-moz-appearance CSS 属性在 Gecko (Firefox) 中使用基于操作系统主题的平台原生样式显示元素。

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

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

【讨论】：

我确实使用了浏览器特定的前缀，如果这就是你的意思吗？但我明白你的意思，也许我以后必须更具体地处理我的 CSS。
以后应该在问题中包含相关的css和html，这样可以更方便的查看。不过我会再看一遍。
刚刚尝试将其全部复制/粘贴到 jsfiddle 中。问题没有出现。但感谢您的帮助。

【解决方案3】：

我不确定您是否已经这样做了，因为我无法查看您的 CSS 文件，但是在 CSS 文件中使用 CSS 重置 样式是一种很好的做法。您可以通过将 margin、padding、border、font-size、font、vertical-align 和 display 等所有基本规则重置为其默认值（如 0、阻止、继承和100%。您可以使用 *（星号）来设置所有标签的样式，或者将它们全部单独列出，用逗号分隔。这样做的原因是因为每个浏览器默认都有自己设置的样式，这可能会覆盖您自己的样式并在您的站点内造成不必要的干扰。这是一个很好的做法。

【讨论】：

谢谢你，但我在我的自定义样式表上方的 html 文件中包含了一个 css 重置。所以所有的值都应该被重置。

【解决方案4】：

尝试更改您的 .target 类位置值，看看发生了什么变化。还可以尝试添加相应的边距值。发生的情况是，您的页脚的 z-index 比您的身体高，这使得它想要掩盖溢出的任何内容。

【讨论】：

我会调查的，谢谢你的帮助。