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

还值得指出的是，您整个页面的执行方式可以大大简化。如果您想了解更多详情，请与我们联系。

CSS布局仅在IE7中定位文本在图像上发布

1 个答案: