0

こんにちは、みんな、

クライアント用のWebサイトを作成していますが、HTML、CSSなしのベーステンプレート画像を受け取りました:(。

自分のHTMLとCSSでテンプレートを再現しようとしていますが、問題が発生しています。

画像の「LOGIN」というテキストの上にボタンを絶対位置に配置しようとしています。ボタン（かすかな長方形）とカバーしようとしているテキスト（LOGIN>）の両方が表示されるように、不透明度を.4に設定しました。

以下の最初の画像はSafariのすべてです。

サファリ

ただし、この画像はFirefoxの同じCSSでも同じです。ボタンが上にあることに注意してください。最初の場合は下にあります。

Firefox

これを修正するにはどうすればよいですか？それは大きな問題であり、そのままにしておくことはできますが、本当に直したいと思います。

前もって感謝します！

****編集****：

人々はコードを求めているので、ここにあります。入力テキストボックスでも同じ問題が発生しているので、そのためのコードを投稿しています。

最初の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

コードを投稿せずに、私はあなたがあなたがしていることを確認することを提案することができるだけです：

  1. CSSリセットの使用
  2. 'absolute-position'ボタンのコンテナアイテムは"position：relative;"に設定されています。
  3. 「絶対位置」ボタンのコンテナアイテムのパディングとマージンがリセットされます
于 2012-06-25T19:46:56.710 に答える
0

あなたがいくつかのコードを見せれば、私は何が悪いのかを見ることができます。それ以外の場合、回避策は相対的なポジショニングを使用してマージンを設定することです

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

もう1つのオプションは、独自の背景画像（既に使用していたのと同じ画像）を使用し、必要に応じて位置の値を明らかに変更することです。彼らはすでに画像をロードしているので、これは余分なロード時間を要しません。

#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

Firefox には、ボタンと入力のレンダリング方法に関する独自の考え方があります。入力要素と Gecko エンジンのパディングに問題があるようです。時々、このスニペットが私を助けてくれます:

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

問題が解決するかどうかはわかりませんが、試してみる価値はあります。

于 2012-06-26T14:04:27.793 に答える