2

背景画像付きのテキストボックスを作成しました。そのコードはFirefoxで正しく機能しますが、で非常に悪く、整列されていませんIE9。これは私が作成したコードです：

<input type="text"class="tbox" />

.tbox
{
    height:40px;
    width:290px;
    padding-left:5px;
    padding-right:46px;
    background:url(user-image2.jpg) no-repeat right;
    background-size:40px 35px;
    border:2px solid rgba(128,255,0,1);
    position:relative;
}

すべてのタイプのブラウザに適したコーディング方法について誰かが私を助けてくれますか？

4

1 に答える 1

2

互換モードである可能性があるとのコメントがいくつかあります。クァークズモードの場合もあります。あなたが引用したCSSはIE9で完全にうまくいくはずなので、これは非常にありそうな理由のようです。

ブラウザのモードを確認するには、F12キーを押して開発ツールウィンドウを表示します。モードは、このウィンドウの右上に表示されます。IE7またはIE8モードか、クァークズモードかはかなり明確になっているはずです。IE9標準以外のものはあなたにとって問題になります。

だから今問題は、ブラウザが間違ったモードを使用するのを避ける方法です。

間違ったモードを選択する理由はいくつかあります。

  • クァークズモード-これはIE5互換モードです。それはあなたのページが本当にひどく間違って見えるようになります。IE9がクァークズモードになる最も一般的な理由は<!DOCTYPE>、ページの上部に宣言を含めるのを忘れた場合、または宣言が存在するが無効である場合です。

    HTMLコードの最初の行が次のようになっていることを確認して、これを修正します。

    <!DOCTYPE html>

  • IE7 / 8互換モード-IE9は、ページにそれらを使用する必要があることを示唆するエラーがあると判断した場合、またはユーザーがそのようにブラウザーを構成した場合、互換モードに陥ることがあります。HTMLコードをW3CValidatorで実行し、検出したエラーを修正する必要があります。これは役立つかもしれません。

    次のようにメタタグを含めることで、IEに利用可能な最良のレンダリングモードを強制的に使用させることもできます。

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

これをHTMLのセクションに入れてください<head>。これにより、IEは可能な限り互換モードの使用を避けるようになります。

お役に立てば幸いです。

于 2013-03-25T10:03:02.247 に答える