特定元素在 IE 和 Chrome 中正确定位，但在 Firefox 中不正确......我不明白为什么？

Question

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

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

有人可以帮我找出导致此问题的原因以及解决方法吗？是否有解决此类问题的好方法，以便我可以找出导致问题的原因？

Answer 1

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

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

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

Answer 2

尝试仅针对 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>

特定元素在 IE 和 Chrome 中正确定位，但在 Firefox 中不正确......我不明白为什么？

Specific Element positioned correctly in IE and Chrome, but not in Firefox...and I can't figure out why?

html

css

cross-browser