在Safari和Firefox中定位不同

Question

大家好，

我正在为客户创建一个网站，我收到了一个基本模板图片，没有HTML，CSS :(。

我正在尝试使用自己的HTML和CSS重现模板，但我遇到了问题。

我正试图在图像中的“LOGIN”文本上绝对定位一个按钮。我已将不透明度设置为.4，以便您可以看到按钮（微弱矩形）和它试图覆盖的文本（LOGIN＆gt;）。

下面的第一张图片是Safari中的全部内容。

然而，这张图片与Firefox中相同的CSS是一样的。注意按钮是如何在上面的，第一种情况是在下面。

我该如何解决这个问题？这是一个很大的问题，虽然我可以保留它的原因，但我真的很想解决它。

提前致谢！

**** ****编辑：

人们要求代码，所以在这里。 我在输入文本框方面遇到了同样的问题，所以我发布了相应的代码。

CSS首先：

input.fp-login-u {
    position: relative;
    top: 74px;
    left: 740px;
    width: 100px;
    padding: 3px;
    border-radius: 3px;
    outline: none;
    border: 1px solid #000000;
}

然后HTML：

<input type="text" class="fp-login-u" />

所有内容都在<header>标记中，边距和填充是定义的，而不是问题（在这些元素上）。

****再次编辑****：

很抱歉不清楚。

白色文本“LOGIN”是包含所有这些内容的div的背景图像。一旦我将褪色的登录按钮正确放在上面，我就会将其删除。

新的褪色按钮，而不是白色文字，正在移动。

Answer 1

使用相对定位。这将使您的生活更加轻松，因为您可以相对于屏幕尺寸（顶部，左侧，右侧，底部）定位它。确保你在IE中检查它，因为它会被抛弃一点点，但遗憾的是你不能修复它。

Answer 2

如果您显示一些代码，我可以看看出了什么问题。否则我会说一个解决方法是使用相对定位和设置边距

#login {
    margin: 10px 30px 0px 30px;
}

另一种选择是使用它自己的背景图像（您已使用的图像相同），并且显然会根据您的需要更改位置值。这不会占用额外的加载时间，因为它们已经加载了图像。

#login {
    margin: 10px 30px 0px 30px;
    background-image: url(images/top_banner.jpg);
    background-position: -30px -233px;
    background-repeat: no-repeat;
}

Answer 3

如果没有发布代码，我只能建议您确保自己：

1. 使用CSS重置
2. “绝对位置”按钮的容器项目设置为“position：relative;”
3. “绝对位置”按钮的容器项目有填充和边距重置

Answer 4

Firefox对于如何呈现按钮和输入有自己的想法。输入元素和Gecko引擎中的填充似乎存在问题。 有时这段代码可以帮助我：

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

我不能确定它是否会解决您的问题，但值得一试。

Answer 5

设置输入样式以使登录按钮图像为背景图像，然后就文本而言，您可以进行文本缩进：-9999px;