IE8和IE9之间的布局差异

Question

I have a site ( www.jamesalder.co.uk ) which is not rendering properly in IE8 and below.

Here it is in IE8:

And in IE9 and everything else:

As you can see, the search box has moved from top right to the wrong place. The html for the search box is:

<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>

It seems as though it is totally missing out the following CSS, in that if I disable this CSS, it has the same effect:

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

Does IE9 have some kind of problem with CSS on forms? Should I put it in a div?

As for the images below that which have decided not to float any more, I have no idea.

Are there any best practices or good resources about getting sites to behave across older versions of IE, or should I just use conditionals?

Answer 1

It was actually caused by malformed html. I had tags which looked like this:

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

Notice the " at the end, which was causing everything following it to be treated as text. Bizarrely, IE9 and everything else fixed the error automatically but IE8 and below didn't.

Answer 2

It may cause by <form> .

Put your <form id="search-form" action="/search"> element in a div.

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

Try this please.

Answer 3

Apply this Css for....

/* 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;
}