IE8和IE9之間的布局差異

Question

我有一個網站（ www.jamesalder.co.uk ）在IE8及以下版本中無法正確呈現。

在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上正常運行的最佳實踐或良好資源，還是應該只使用條件接收？

Answer 1

它實際上是由格式錯誤的html引起的。 我有看起來像這樣的標簽：

<img src="/media/homepage_images/all-paintings-sale.jpg" 
     alt="All Victorian Paintings for Sale" 
     title="All Victorian Paintings for Sale" ">

注意最后的“，這導致將其后的所有內容都視為文本。奇怪的是，IE9和其他所有內容都自動修復了錯誤，但IE8及以下版本沒有解決。

Answer 2

這可能是由<form>引起的。

將您的<form id="search-form" action="/search">元素放入div中。

<div id="header">
    <img src="..."/>
    <div id="search-form">
        <form action="/search"></form>
    </div>
</div>

請嘗試這個。

Answer 3

將此CSS應用於...。

/* Css for ie 8 */

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

======================================================

/* Css for ie 9 */

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