CSS макет проблемы только в IE7 позиционирования текста над изображением - PullRequest
Новая
       9

CSS макет проблемы только в IE7 позиционирования текста над изображением

2 голосов
/ 08 мая 2011

Так что этот макет вызывает только проблемы в IE7.Я пытаюсь сделать центрированный макет с двумя изображениями вокруг видео-вставки и текстом над одним из изображений.IE7 перебрасывает текст вправо.Я не уверен, что IE7 не обрабатывает метод отрицательного поля для центрирования или какой-либо другой проблемы.

Я знаю, что это не ошибка переполнения, потому что я вынул overflow-x: hidden; и получил то же поведение.Я был бы чрезвычайно признателен, если у кого-либо есть какие-либо идеи или решения, заранее спасибо!

Вот соответствующий код: 

<div id="hero">
    <img src="images/heroleft.jpg" alt="" />
    <p id="herotitle">WE ARE A VIDEO PRODUCTION<br />TEAM</p>
    <iframe src="http://player.vimeo.com/video/22903076?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="622" height="350" frameBorder='0' border='0' style="border:0"></iframe>
    <img src="images/herofaderight.jpg" alt="" />
</div>

CSS: 

body{ 
    margin: 0;
    padding: 0;
    color: #fff568;
    overflow-x: hidden; 
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

#hero{
    left: 50%;
    width: 1160px;
    margin-left: -580px;
    height: 350px;
    position: absolute;
}

img,iframe{
    float: left;
}

p#herotitle{
    font-size: 36px;line-height: 38px;font-weight: 600;
    padding-left: 130px;
    position: absolute;
    margin-top: 36px;
}

1 Ответ

0 голосов
/ 08 мая 2011

Вам нужно добавить left: 0 к #herotitle, чтобы он работал в IE7.

См. В IE7: http://jsbin.com/avawo5

Также стоит указатьТаким образом, то, как вы делаете всю страницу, может быть существенно упрощено.Если вам нужна более подробная информация, дайте мне знать.

...