IE8和IE9的布局区别答案

【问题标题】：layout difference between IE8 and IE9IE8和IE9的布局区别
【发布时间】：2013-11-13 12:08:22
【问题描述】：

我有一个网站 (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 上运行，是否有任何最佳做法或好的资源，或者我应该只使用条件？

【问题讨论】：

标签： html css internet-explorer-8 internet-explorer-9

【解决方案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 及更低版本没有。

【讨论】：

这并不是特别奇怪。浏览器历来以不同的方式处理 HTML 错误，因为错误处理直到最近才在 HTML 中标准化。

【解决方案2】：

可能是<form>引起的。

将您的<form id="search-form" action="/search"> 元素放在一个 div 中。

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

请试试这个。

【讨论】：