Блог

Таким образом, этот макет вызывает проблемы только в 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=0amp;amp;byline=0amp;amp;portrait=0amp;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;
}
  

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

Смотрите в IE7: http://jsbin.com/avawo5

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