html - IE8 と IE9 のレイアウトの違い

Question

IE8 以下で適切にレンダリングされないサイト ( www.jamesalder.co.uk ) があります。

ここにIE8があります：

そしてIE9と他のすべてで：

ご覧のとおり、検索ボックスが右上から間違った場所に移動しました。検索ボックスの html は次のとおりです。

<div id="header">
    <img src="/media/header_images/ts-hutton_2.jpg" title="Victorian Paintings at James Alder Fine Art" alt="Victorian Paintings at James Alder Fine Art" "="">
    <form id="search-form" action="/search">
             <label id="search-label">Search the Site</label>
             <input type="image" src="/static/images/sign-up.gif" value="search" id="search-button">
             <input type="text" name="q" id="search-input">
    </form>

</div>

次の CSS が完全に欠落しているように見えます。この CSS を無効にすると、同じ効果があります。

#search-form {
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 3px;
}

IE9 では、フォーム上の CSS に何らかの問題がありますか? divに入れるべきですか？

その下の画像はもう浮かないことにしましたが、私にはわかりません。

古いバージョンの IE でサイトを動作させるためのベスト プラクティスや優れたリソースはありますか?