在 Safari 和 Firefox 中定位不同答案

【问题标题】：Positioning Different in Safari and Firefox在 Safari 和 Firefox 中定位不同
【发布时间】：2012-06-27 02:30:42
【问题描述】：

大家好，

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

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

我正在尝试将按钮绝对定位在图像中的文本“LOGIN”上。我已将不透明度设置为 0.4，以便您可以看到按钮（模糊矩形）和它试图覆盖的文本（登录 >）。

下面的第一张图片是 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 的背景图像。一旦我将褪色的登录按钮正确放置在它上面，我就会将其移除。

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

【问题讨论】：

您能否解释一下“登录”文本的来源？是输入的值吗？您是否尝试创建具有自定义背景和 HTML 文本的按钮？
相对于页面的其余部分，这两个元素中的哪一个出现在FF vs Safari的不同位置，按钮还是白色的“LOGIN”？白色的“LOGIN”是图像还是（至少部分）纯文本？也可能有助于查看代码。

标签： html css firefox safari css-position

【解决方案1】：

使用相对定位。这将使您的生活更轻松，因为您可以将其相对于屏幕尺寸的顶部、左侧、右侧、底部进行定位。确保你在 IE 中检查它，因为它会被抛出一点点，但不幸的是你无法修复它。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

没有发布代码，我只能建议你确保你是：

使用 CSS 重置
“绝对位置”按钮的容器项设置为“位置：相对；”
“绝对位置”按钮的容器项已重置其填充和边距

【讨论】：

我正在使用 Eric Meyer 的 CSS 重置，我正在使用“位置：相对”（对不起，错字），并且我已经重置了边距和填充。 :) 我读到我正在努力做到“像素完美”，这是真的。真的有那么难吗？

【解决方案4】：

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

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

我不能肯定它是否能解决你的问题，但值得一试。

【讨论】：

【解决方案5】：

样式输入，使登录按钮图像是背景图像，然后就您的文本而言，您可以执行 text-indent: -9999px;

【讨论】：