网站在浏览器中显示不同

Site is showing differently in browsers

我有一个项目,我们要创建一个作品集。 但是问题来了:

如果您查看 my site,然后按 link "About",显示的选项卡底部。

它在 Chrome 中的行为与在 IE 和 Firefox 中的行为不同。 在 IE 和 Firefox 中,选项卡底部的文本会被截断,而在 Chrome.

中则不会

三个浏览器的开发工具我都试过,也试过定位问题,但是不行。 我希望你们中的一些人能帮我找到它。

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

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

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

每个浏览器的本机样式系统略有不同,您必须小心。

例如,Firefox 使用 "gecko:"

The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.

所以Firefox用的是Gecko,Chrome用的是Webkit,IE用的是自己的系统。每一个都略有不同,您必须在 css.

中考虑到这一点

在尝试完成更复杂的 CSS3 样式(如 transition.[=12=)时,我会尝试坚持使用常规 css 并使用特定于浏览器的 css ]

我不确定你是否这样做了,因为我无法查看你的 CSS 文件,但是 [=26] 中有 CSS reset 样式=] 文件是很好的做法。您可以通过将 margin、padding、border、font-size、font、vertical-aligndisplay 等所有基本规则重置为它们的默认值如 0blockinherit100%。您可以使用 *(星号)来设置所有标签的样式或将它们全部列出并用逗号分隔。这样做的原因是因为默认情况下每个浏览器都有自己的设置样式,这可能会覆盖您自己的样式并在您的站点内造成不必要的干扰。这是一个很好的做法。

尝试更改您的 .target class 位置值,看看发生了什么变化。也可以尝试添加相应的保证金值。发生的情况是您的页脚 z-index 比您的 body 高,这使得它想要掩盖溢出到它上面的任何内容。