[英]Specific Element positioned correctly in IE and Chrome, but not in Firefox…and I can't figure out why?
I've been reading up recently on cross-browser compatibility and have learned a lot, but I haven't been able to solve this specific problem. 我最近一直在阅读有关跨浏览器的兼容性的书,并且学到了很多东西,但是我还不能解决这个特定的问题。
On a site I built, www.paintnomorect.com, in Chrome and IE the contact form is positioned correctly at the top-left. 在我在Chrome和IE中建立的网站www.paintnomorect.com上,联系表单正确位于左上角。 However in Firefox, it is dropped below the main image, and I don't know whether it's a positioning issue, margin, float, or what...I've tried searching for answers, but most seem to be related to a specific instance and I haven't found one that's helped yet. 但是在Firefox中,它被放置在主图像下方,并且我不知道它是定位问题,边距,浮动还是其他问题...我尝试搜索答案,但大多数似乎与特定问题有关实例,但我还没有找到一个有帮助的实例。
Can someone help me figure out what's causing this issue and how to fix it? 有人可以帮我找出造成此问题的原因以及如何解决此问题吗? And is there a good way to troubleshoot issues like this so I can figure out what is causing problems in the future? 并且有解决此类问题的好方法,这样我就可以找出导致问题的原因吗?
Remove float
and margin-top
and use this CSS: 删除float
和margin-top
并使用此CSS:
.contentAreaC .jumbotron.has-formbuilder .module-container .formbuilder {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
This will vertically align the form and keep it all the way to the left. 这将使表格垂直对齐,并一直保持在左侧。 Also, you can remove the ::before
that you are using to vertically align the form. 同样,您可以::before
用于垂直对齐表单::before
删除:::。 I think the float
was messing things up. 我认为float
事情搞砸了。
Try to target FireFox only and change a perticular part of the CSS style: 尝试仅针对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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.