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 & Competitive Analysis</h4>
Online health check & 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％似乎没有做任何事情。我当然删除了它，因为它使这些部分变小了（或是那个传统风格的人进来的？）
至于pchan-ie的建议，中间部分的宽度仍然很奇怪，但正如你所建议的那样，我应该做一个条件样式表，这是我很快就要做的事情。
此外，赏金发生了什么，我是否还需要将其交给某人或在某人过期时自动将其交给某人？如果我能得到纠正的话，我还会给谁更多的积分给谁能完成这件事，如果我能得到这个额外的分数＆＃34; =菜单＆＃34;问题也已修复。
3 个答案:
答案 0 :(得分：2)
您的问题似乎是由于标记不平衡造成的，特别是<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 & Competitive Analysis</h4> Online health check & 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 -->
之前：
后：
答案 1 :(得分：1)
我无法在本地重现此错误，因此不知道这是否有效。 它看起来有两个问题，第一个是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 & Competitive
Analysis</H4>
<DIV class=textwidget><A title="Website Audits & Evaluations"
href="http://melissamerriam.com/onlinedraft/onlinedraft/website-audits/">Online
health check & 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条件样式表选项中。就像你的问题评论中提到的一样。
答案 2 :(得分：1)
使用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％; }
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？