разница между 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; 
}