Question

我有一个browserstack帐户并查看了我为客户制作的新网站，但我从来没有真正开发过旧版浏览器。我并不需要它在旧版浏览器中完美布局，但至少让它可见是很好的。我在IE 7的Windows XP上查看过它。

我在下面提供了截图 enter image description here

这3个框的HTML应该在横幅

下面

<div id="ez-home-middle-container" class="ez-home-container-area clearfix">

<div id="ez-home-middle-1" class="widget-area ez-widget-area one-third first">
<section id="black-studio-tinymce-4" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">SEO</h4>
Strategic approach, driving traffic with Search Engine Optimization.
<div class="su-button-center">Read More</div></section>
</div><!-- end #ez-home-middle-1 -->

<div id="ez-home-middle-2" class="widget-area ez-widget-area one-third">
<section id="black-studio-tinymce-6" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">Website Audits &amp; Competitive Analysis</h4>
Online health check &amp; how you measure up to your competitors.

<div class="su-button-center"> Read More</div></section>
</div><!-- end #ez-home-middle-2 -->

<div id="ez-home-middle-3" class="widget-area ez-widget-area one-third">
<section id="black-studio-tinymce-5" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">Local Search</h4>


<div class="su-button-center">Read More</div></section>
</div><!-- end #ez-home-middle-3 -->

</div><!-- end #ez-home-middle-container -->

这是CSS

div#ez-home-middle-container {
    margin-top: 27em;
}

#ez-home-middle-1, #ez-home-middle-2, #ez-home-middle-3 { 
    position: relative; 
    text-align: center; 
    background: url(images/melissa-box-bg.jpg) repeat; 
    padding: 1.5em 2em; 
    border-top:.3em solid #d0d0d0; 
    min-height: 250px; 
    margin-bottom: 1.5em;
}

#ez-home-middle-1 .su-button span, 
#ez-home-middle-2 .su-button span, 
#ez-home-middle-3 .su-button span { 
    width: 100px; 
    position: absolute; 
    bottom: 1em; 
    left: 50%; 
    margin-left: -70px;
}

这是我的JSFiddle - http://jsfiddle.net/yagbsfua/

它有点像忽略了＃ez-home-middle-container上的margin-top：27em然后宽度太大了？

另一件小事。 IE是否有显示错误：无;属性？它出现在IE 7和IE中。 IE 8.我的＆＃34; =菜单＆＃34;不应该显示直到它达到768px宽（但现在它总是可见。

感谢您提供任何指导或帮助！

更新：

对于那些试图帮忙的少数人的沟通延迟感到抱歉！ Annoymous先生有一个很好的建议，关于浮动前家用容器，以便它遵循横幅，但＃ez-home-middle部分的宽度不适合仍然在IE 7中的那一行，IE 8它看起来很棒但是我还能为IE 7做些什么吗？我可以在标题中放入IE 7的条件样式表，然后让IE 7的宽度更小吗？

这就是IE 7中ez-home-container浮动的样子（宽度：27％似乎没有做任何事情。我当然删除了它，因为它使这些部分变小了（或是那个传统风格的人进来的？）

enter image description here

至于pchan-ie的建议，中间部分的宽度仍然很奇怪，但正如你所建议的那样，我应该做一个条件样式表，这是我很快就要做的事情。

此外，赏金发生了什么，我是否还需要将其交给某人或在某人过期时自动将其交给某人？如果我能得到纠正的话，我还会给谁更多的积分给谁能完成这件事，如果我能得到这个额外的分数＆＃34; =菜单＆＃34;问题也已修复。

Answer 1

您的问题似乎是由于标记不平衡造成的，特别是<div class="widget-wrap">标记之前没有关闭</section>标记。浏览器错误纠正不平衡标签的方式不同，IE7和IE8似乎被绊倒了。

更正了HTML：

<div id="ez-home-middle-container" class="ez-home-container-area clearfix">

    <div id="ez-home-middle-1" class="widget-area ez-widget-area one-third first">
        <section id="black-studio-tinymce-4" class="widget widget_black_studio_tinymce">
            <div class="widget-wrap">
                <h4 class="widget-title widgettitle">SEO</h4> Strategic approach, driving traffic with Search Engine Optimization.
                <div class="su-button-center">Read More</div>
            </div>
        </section>
    </div>
    <!-- end #ez-home-middle-1 -->

    <div id="ez-home-middle-2" class="widget-area ez-widget-area one-third">
        <section id="black-studio-tinymce-6" class="widget widget_black_studio_tinymce">
            <div class="widget-wrap">
                <h4 class="widget-title widgettitle">Website Audits &amp; Competitive Analysis</h4> Online health check &amp; how you measure up to your competitors.
                <div class="su-button-center"> Read More</div>
            </div>
        </section>
    </div>
    <!-- end #ez-home-middle-2 -->

    <div id="ez-home-middle-3" class="widget-area ez-widget-area one-third">
        <section id="black-studio-tinymce-5" class="widget widget_black_studio_tinymce">
            <div class="widget-wrap">
                <h4 class="widget-title widgettitle">Local Search</h4> Be prominent in you local market.
                <div class="su-button-center">Read More</div>
            </div>
        </section>
    </div>
    <!-- end #ez-home-middle-3 -->

</div>
<!-- end #ez-home-middle-container -->

之前：

before

后：

after

Answer 2

我无法在本地重现此错误，因此不知道这是否有效。它看起来有两个问题，第一个是ez-home-middle-1，ez-home-middle-2，ez-home-middle-3 divs不尊重其容器的边缘ez-home-middle-container 。第二个问题是ez-home-middle-1的宽度，ez-home-middle-2，ez-home-middle-3超过其容器的三分之一宽度，定义了它们的最大总宽度，导致浏览器将它们包裹在容器内。 第一个问题 您可以尝试删除位置：来自ez-home-middle-1，ez-home-middle-2，ez-home-middle-3标签的相对风格。我相信它忽略了边距并将div设置为top：0默认为。

请参阅下面更新的ez-home-middle css。

如果不起作用，请尝试从容器中删除边距并将ez-home-middle-1，ez-home-middle-2，ez-home-middle-3 tages的相对顶部属性设置为432px或27em。如果你这样做，你还需要设置ez-home-bottome-container的顶部，因为它会跳起来。

第二期 似乎有一个css类定义宽度。 IE7正在使用正确的，但你应该删除100％的类。还有其他几个类，如六分之一和一半，有同样的问题。

.one-third {
    MARGIN: 0px; WIDTH: 100%
}
.one-third {
    WIDTH: 31.62%
}

site-inner类将三个ez-home-middle框必须适合的宽度定义为800px。您需要将这些框的宽度更改为小于800px / 3或260px。宽度设置为31.6％，但IE7将其读取为总页面宽度的31.6％而不是容器宽度。我认为宽度来自三分之一的类，这应该从div中删除，并在ez-home-middle类中指定一个新的宽度。

这是css，删除了第一个问题的相对位置，添加了问题2的宽度。

#ez-home-middle-1 {
    PADDING-RIGHT: 2em; BORDER-TOP: #d0d0d0 0.3em solid; PADDING-LEFT: 2em; MIN-HEIGHT: 250px; BACKGROUND: url(images/melissa-box-bg.jpg); MARGIN-BOTTOM: 1.5em; PADDING-BOTTOM: 1.5em; PADDING-TOP: 1.5em; TEXT-ALIGN: center; width:260px;
}
#ez-home-middle-2 {
    PADDING-RIGHT: 2em; BORDER-TOP: #d0d0d0 0.3em solid; PADDING-LEFT: 2em; MIN-HEIGHT: 250px; BACKGROUND: url(images/melissa-box-bg.jpg); MARGIN-BOTTOM: 1.5em; PADDING-BOTTOM: 1.5em; PADDING-TOP: 1.5em; TEXT-ALIGN: center; width:260px;
}
#ez-home-middle-3 {
    PADDING-RIGHT: 2em; BORDER-TOP: #d0d0d0 0.3em solid; PADDING-LEFT: 2em; MIN-HEIGHT: 250px; BACKGROUND: url(images/melissa-box-bg.jpg); MARGIN-BOTTOM: 1.5em; PADDING-BOTTOM: 1.5em; PADDING-TOP: 1.5em; TEXT-ALIGN: center; width:260px;
}

html减去三分之一的班级

<DIV class="ez-home-container-area clearfix" id=ez-home-middle-container>
<DIV class="widget-area ez-widget-area first" 
id=ez-home-middle-1><SECTION class="widget widget_black_studio_tinymce" 
id=black-studio-tinymce-4>
<DIV class=widget-wrap>
<H4 class="widget-title widgettitle">SEO</H4>
<DIV class=textwidget><A title="Search Engine Optimization (SEO)" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/seo/">Strategic 
approach, driving traffic with Search Engine Optimization.</A> 
<DIV class=su-button-center><A class="su-button su-button-style-soft" 
style="BORDER-LEFT-COLOR: #b7b7b7; BORDER-BOTTOM-COLOR: #b7b7b7; COLOR: #505050; BORDER-TOP-COLOR: #b7b7b7; BACKGROUND-COLOR: #e5e5e5; BORDER-RIGHT-COLOR: #b7b7b7; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/seo/" target=_self><SPAN 
style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 16px; BORDER-LEFT-COLOR: #ededed; BORDER-BOTTOM-COLOR: #ededed; PADDING-BOTTOM: 0px; COLOR: #505050; BORDER-TOP-COLOR: #ededed; LINE-HEIGHT: 32px; PADDING-TOP: 0px; BORDER-RIGHT-COLOR: #ededed; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: none; -moz-text-shadow: none; -webkit-text-shadow: none">Read 
More</SPAN></A></DIV></DIV></DIV></SECTION></DIV><!-- end #ez-home-middle-1 -->
<DIV class="widget-area ez-widget-area " id=ez-home-middle-2><SECTION 
class="widget widget_black_studio_tinymce" id=black-studio-tinymce-6>
<DIV class=widget-wrap>
<H4 class="widget-title widgettitle">Website Audits &amp; Competitive 
Analysis</H4>
<DIV class=textwidget><A title="Website Audits &amp; Evaluations" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/website-audits/">Online 
health check &amp; how you measure up to your competitors.</A> 
<DIV class=su-button-center><A class="su-button su-button-style-soft" 
style="BORDER-LEFT-COLOR: #b7b7b7; BORDER-BOTTOM-COLOR: #b7b7b7; COLOR: #505050; BORDER-TOP-COLOR: #b7b7b7; BACKGROUND-COLOR: #e5e5e5; BORDER-RIGHT-COLOR: #b7b7b7; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/website-audits/" 
target=_self><SPAN 
style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 16px; BORDER-LEFT-COLOR: #ededed; BORDER-BOTTOM-COLOR: #ededed; PADDING-BOTTOM: 0px; COLOR: #505050; BORDER-TOP-COLOR: #ededed; LINE-HEIGHT: 32px; PADDING-TOP: 0px; BORDER-RIGHT-COLOR: #ededed; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: none; -moz-text-shadow: none; -webkit-text-shadow: none">Read 
More</SPAN></A></DIV></DIV></DIV></SECTION></DIV><!-- end #ez-home-middle-2 -->
<DIV class="widget-area ez-widget-area " id=ez-home-middle-3><SECTION 
class="widget widget_black_studio_tinymce" id=black-studio-tinymce-5>
<DIV class=widget-wrap>
<H4 class="widget-title widgettitle">Local Search</H4>
<DIV class=textwidget><A title="Local Search Services" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/local-search/">Be 
prominent in you local market.</A> 
<DIV class=su-button-center><A class="su-button su-button-style-soft" 
style="BORDER-LEFT-COLOR: #b7b7b7; BORDER-BOTTOM-COLOR: #b7b7b7; COLOR: #505050; BORDER-TOP-COLOR: #b7b7b7; BACKGROUND-COLOR: #e5e5e5; BORDER-RIGHT-COLOR: #b7b7b7; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/local-search/" 
target=_self><SPAN 
style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 16px; BORDER-LEFT-COLOR: #ededed; BORDER-BOTTOM-COLOR: #ededed; PADDING-BOTTOM: 0px; COLOR: #505050; BORDER-TOP-COLOR: #ededed; LINE-HEIGHT: 32px; PADDING-TOP: 0px; BORDER-RIGHT-COLOR: #ededed; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: none; -moz-text-shadow: none; -webkit-text-shadow: none">Read 
More</SPAN></A></DIV></DIV></DIV></SECTION></DIV><!-- end #ez-home-middle-3 --></DIV><!-- end #ez-home-middle-container -->

如果没有本地电脑上的文件，我就能做到这一切。我试图从您的网站下载，但IE7不会使用与您的onlinedraft页面相同的问题呈现它。这意味着我无法测试我的修复。

当您对样式表实施更改时，应将它们包含在IE条件样式表选项中。就像你的问题评论中提到的一样。

Answer 3

使用Paul Irish方法或其他方法将以下内容定位到IE7：

众所周知，IE7会忽略绝对定位元素后的元素上边距。您可以通过使用特定于IE7的样式将填充添加到周围容器的顶部来解决此问题：

.ez-home-middle-container { padding-top：27em; }
IE7不支持border-box，因此您需要一个特定于IE7的样式来调整.widget-areas的宽度以补偿填充。最强大的可能是使左右填充也是一个百分比，例如：

.ex-widget-area { 宽度：26％; 填充：1.5em 2.5％; }

IE 7的样式

3 个答案:

更正了HTML：

之前：

后：