特定元素在 IE 和 Chrome 中正确定位，但在 Firefox 中不正确……我不知道为什么？答案

【问题标题】：Specific Element positioned correctly in IE and Chrome, but not in Firefox...and I can't figure out why?特定元素在 IE 和 Chrome 中正确定位，但在 Firefox 中不正确……我不知道为什么？
【发布时间】：2015-06-27 01:18:48
【问题描述】：

我最近一直在阅读有关跨浏览器兼容性的内容，并且学到了很多东西，但是我一直无法解决这个具体问题。

在我建立的网站 www.paintnomorect.com 上，在 Chrome 和 IE 中，联系表单正确地位于左上角。但是在 Firefox 中，它被放在主图像下方，我不知道它是定位问题、边距、浮动还是什么......我试过寻找答案，但大多数似乎与特定的例如，我还没有找到一个有帮助的。

谁能帮我找出导致此问题的原因以及如何解决它？有没有解决此类问题的好方法，以便我找出导致问题的未来？

【问题讨论】：

标签： html css cross-browser

【解决方案1】：

尝试仅针对 FireFox 并更改 CSS 样式的特定部分：

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

【讨论】：

【解决方案2】：

删除 float 和 margin-top 并使用此 CSS：

.contentAreaC .jumbotron.has-formbuilder .module-container .formbuilder {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

这将使表单垂直对齐并一直保持在左侧。此外，您可以删除用于垂直对齐表单的::before。我认为float 搞砸了。

【讨论】：