Css IE 7的造型

我有一个browserstack帐户，并查看了我为客户制作的新网站，但我从未真正成为为旧浏览器开发的人。我不需要它在旧的浏览器中被完美地展示出来，但至少它是可查看的。我在IE 7上的Windows XP上查看了它

我在下面提供了一个屏幕截图

这是横幅下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 -->

这是我的JSFIDLE-

这有点像它忽略了页边顶部：#ez home中间容器上的27em，然后宽度太大了

另一件小事。IE是否有显示错误：无；财产？它出现在IE7和IE8中。我的“=菜单”在达到768px宽之前不会显示（但现在它总是可见的）

谢谢你的指导和帮助

更新：

很抱歉，与你们中少数试图帮助的人的沟通被耽搁了！Havermous先生提出了一个很棒的建议，关于浮动标记ex home容器，使其跟随在横幅下，但是#ez home中间部分的宽度不适合该行，仍然在IE 7、IE 8中。看起来很棒，但是我还能为它做些什么吗或者IE7？我可以在标题中输入IE7的条件样式表，然后让IE7的宽度变小，对吗

这就是IE 7中ez home容器浮动时的样子（宽度：27%似乎没有任何作用。我当然删除了它，因为它使这些部分变得更小（或者说，这就是Conditional stylehseet出现的原因？）

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

---

还有，赏金发生了什么事，我还需要给别人吗？还是在赏金过期时自动给别人？如果我能纠正这个问题，我仍然会给能和我一起完成这个任务的人更多的分数，如果我能得到这个“=菜单”，我会额外加分问题也已修复。

您的问题似乎是由标记不平衡引起的，特别是

标记未在

标记之前关闭。浏览器错误以不同方式更正不平衡的标记，IE7和IE8似乎因此而出错

更正的HTML：

SEO战略方针，通过搜索引擎优化驱动流量。
阅读更多
网站审计和竞争分析在线健康检查和如何衡量你的竞争对手。
阅读更多
本地搜索将在您的本地市场中占有突出地位。
阅读更多

之前：

之后：

---

我无法在本地重现此错误，因此不知道这是否有效。 看起来有两个问题，第一个是ez-home-middle-1，ez-home-middle-2，ez-home-middle-3 div不尊重其容器ez-home-middle-container的边距。第二个问题是ez-home-middle-1，ez-home-middle-2，ez-home-middle-3的宽度超过其容器宽度的三分之一，定义了其最大total宽度，使浏览器将其包装在容器中。 第一个问题 您可以尝试从ez-home-middle-1、ez-home-middle-2、ez-home-middle-3标记中删除position:relative样式。我认为这会忽略边距，并在默认情况下将div设置为top:0

请参阅下面更新的ez home中间css

如果这不起作用，请尝试从容器中删除边距，并将ez-home-MIDLE-1、ez-home-MIDLE-2、ez-home-MIDLE-3标记的相对顶部属性设置为432px或27em。如果执行此操作，还需要设置ez-home BOOTME容器的顶部，因为它会跳起来

第二期 似乎不止一个css类定义了宽度。IE7使用的是正确的一个，但您应该以100%删除该类。还有其他几个类，如六分之一和一半，也有同样的问题

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

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

这是css，删除了第一期的相对位置，增加了第二期的宽度

#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不会呈现与你的在线草稿页面相同的问题。这意味着我无法测试我的修复程序

---

当您实现对样式表的更改时，您应该将其包含在IE条件样式表选项中。正如您的问题的注释中所提到的。

使用Paul Irish方法或其他方法，针对IE7的以下内容：

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

.ez家用中间容器{ 垫顶：27em； }

IE7不支持边框框，因此您需要一个IE7特定的样式来调整.widget区域的宽度以补偿填充。最强大的可能是使左右填充也有一个百分比，例如：

.ex小部件区域{ 宽度：26%； 填充物：1.5em 2.5%； }

哈

#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;
}

<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 -->