IE 没有将这些图像居中,有解决办法吗?
我的问题页面的特点是“高中”、“初中”和“小学”图像在除 IE6、7 和 8 之外的所有浏览器中完美居中。
页面的相关部分:(为了清晰起见进行了编辑)
CSS:
#block {
clear: both;
width: 682px;
}
.education_level_wrapper {
float: left;
width: 100%;
}
.education_level {
margin-bottom: 3px;
margin-left: auto;
margin-right: auto;
display: block;
}
HTML:
<div id="block">
<div class="education_level_wrapper">
<img src="[sniped]/Title_HS.png" class="education_level" />
</div>
</div>
IE:
Chrome:
我在这里做错了什么?
编辑:
在此处查看固定版本:非存档图形。上面的链接是为了存档目的保持一致的快照。
My issue with this page is that the "High School", "Middle School", and "Elementary School" images center perfectly in all browsers except for IE6, 7, and 8.
Relevant parts of the page: (Edited for clarity)
CSS:
#block {
clear: both;
width: 682px;
}
.education_level_wrapper {
float: left;
width: 100%;
}
.education_level {
margin-bottom: 3px;
margin-left: auto;
margin-right: auto;
display: block;
}
HTML:
<div id="block">
<div class="education_level_wrapper">
<img src="[sniped]/Title_HS.png" class="education_level" />
</div>
</div>
IE:
Chrome:
What am I doing wrong here?
EDIT:
See the fixed version here: Non-Archived Graphic. The above link was a snapshot to stay consistent for archival purposes.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
在页面前面添加
以使浏览器尝试遵守 CSS 规范。
现在,您可以让浏览器像 2001 年一样呈现这些页面。
技术解释是,在 IE6 怪异模式下,如果不处于标准模式,自动边距将无法工作。如果您必须使用怪异模式,解决方法是在父元素上应用
text-align:center
。但您应该使用标准模式,又称理智模式。Prepend your page with
<!DOCTYPE HTML>
to get browsers to attempt to comply with the CSS spec.Right now you're letting browsers render those pages as if this was 2001.
Technical explanation is that, in IE6 quirks mode auto margin wont work without being in standards mode. The workaround if you HAVE to use quirks mode is to apply
text-align:center
on the parent element. But you should be using standards mode, aka sane mode.education_level_wrapper 函数中的 float: left 属性可能是导致此问题的原因。
使用边距来调整位置而不是
The attribute float: left in education_level_wrapper function is the probable cause of this problem.
Use margin to adjust positioning rather than