検索ボックスに何か問題があります

Question

私は検索ボックスを持っています。

ボックス自体は画像であり、ボタンも画像です。次のように

CSSは次のとおりです。

.form-search { 
    background: url("../images/search_form.png") no-repeat scroll 0 0 transparent; 
    float: left; 
    height: 44px; 
    margin: 28px 0 0; 
    position: relative; 
    text-align: center; 
    width: 442px; 
} 
.form-search .button { 
    left: 393px; 
    position: absolute; 
    top: 6px; 
} 
.form-search .input-text { 
    color: #847D7D; 
    font-size: 1em; 
    font-weight: bold; 
    left: 93px; 
    position: absolute; 
    top: 13px; 
    width: 270px; 
} 

次のようにHTMLは次のとおりです。

<fieldset class="form-search"> 
    <input type="text" class="input-text" name="keyword" value="Enter Keyword/Catalogue Code" id="textBox"/> 
    <?php echo $form->error("keyword"); ?> 
    <input type="image" class="button" name="search" alt="Search" src="../images/search_form_button.png" /> 
</fieldset> 

私はいくつかの問題を抱えています。

• まず、私は自分の検索ボックスを設置しようとしているエリアの周りに線があります。外行を削除するコードがありませんでしたか？
• 第2に、テキストを配置するための実際の検索ボックスは、内部ではなく画像の上に座っています。ここでも、入力タイプのテキストボックスの枠線を削除するための方法があります。
• 最後に、クロムとIEでは問題はありませんが、FFではマイボタンが表示されません。

私はFFで持っている問題のイメージを閉じ込めました。

更新：

私はフィールドセットと入力要素からボーダーを削除しました。これは私に3番目の問題だけを残す。クロムとIEはボタンをうまく表示しますが、FFは表示されません。

Answer 1

フィールドセットにはデフォルトで境界があると思います。フィールドセットにborder: 0を設定して削除します。余白、特にフィールドセットとフォームの余白もリセットする必要があります。

Answer 2

質問1は既にGolezTrolによって回答されています。第二はあなた自身によって解決されます。

は今、第三について：

短い答え：フィールドセット要素のパディングを削除します。

やや長い答え：別のデフォルト値を持つ

すべてのブラウザのスタイルのすべての要素。この場合、FireFoxはフィールドセット要素にパディングを追加します。したがって、パディングを手動で削除する必要があります。

このようなピクセルの完璧さが求められ、サイトがすべてのブラウザで正確に同じに見えるようにするには、通常reset style sheetを使用することをお勧めします。このようなスタイルシートを最初にマークアップにリンクすると、制作スタイルシートでこのような調整を行うことができなくなります。

もう1つのヒント：Chrome（Safariなど）の入力要素の周囲にフォーカス枠が表示されるブラウザがあるため、テキスト入力のサイズを拡大することを検討することもできます。例については、this demo fiddleを参照してください。