仅在 IE7 中的 CSS 布局问题在图像上定位文本

Question

所以这种布局只会在 IE7 中引起问题。我正在尝试使用嵌入视频的 2 个图像进行居中布局，并在其中一个图像上放置一些文本。 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;
}

Answer 1

您需要将left: 0 添加到#herotitle 以使其在IE7 中工作。

在 IE7 中查看： http://jsbin.com/avawo5

还值得指出的是，您处理整个页面的方式可以大大简化。如果您想了解更多详情，请告诉我。