Редактировать: Мне удалось заставить его работать в IE 8 + 9, используя <meta http-equiv="X-UA-Compatible" content="IE=7" />, но проблема все еще сохраняется в 6 / 7.
Я пытаюсь добиться этого эффекта:
http://img860.imageshack.us/img860/3905/example.png
Что мне удалось сделать во всех браузерах, кроме IE (все версии, включая 9) без какой-либо дополнительной разметки:
<div id="content">
<p class="firstPara">Para1</p>
<p>Para2</p>
<p>Para3</p>
</div>
И с этим CSS:
#content {
width: 700px;
height: 232px;
position: relative;
background: #ccc url('assets/headerImage.png') left top no-repeat;
}
#content p {
background-color: #fafafa;
position: relative;
top: 232px;
width: 440px;
padding: 10px;
}
#content p.firstPara {
position: absolute;
top: auto;
bottom: 0;
background: #eee url('assets/headerTextBack.png') left bottom no-repeat;
}
Чтобы разместить первый абзац, который я выбрал, установить его в абсолютное положение и установить для свойства «bottom» значение 0, таким образом, поместив его в конец родительского элемента div, высота которого была установлена равной значению образ. Однако в IE кажется, что высота полностью игнорируется, если сумма высот статических / относительно расположенных элементов превышает указанную высоту. В результате первый абзац свисает дальше, чем следует. Максимальная высота и различные исправления, которые я нашел, похоже, не сработали.
В любом случае, я в растерянности, я не могу заставить его работать под IE, если я не разделю первый абзац на другой div.
Любая помощь будет принята с благодарностью!