0

大家好，

我正在为客户制作一个网站，我收到了一个基本模板图像，没有 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 的背景图像。一旦我将褪色的登录按钮正确放置在它上面，我就会将其移除。

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

4

5 回答 5

1

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

于 2012-06-25T19:34:53.923 回答
0

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

#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;
}
于 2012-06-25T19:36:55.390 回答
0

在不发布代码的情况下，我只能建议您确保您是：

  1. 使用 CSS 重置
  2. “绝对位置”按钮的容器项设置为“位置：相对；”
  3. 您的“绝对位置”按钮的容器项具有其填充和边距重置
于 2012-06-25T19:46:56.710 回答
0

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

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

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

于 2012-06-26T14:04:27.793 回答
0

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

于 2014-03-06T01:56:05.193 回答