IE 没有将这些图像居中,有解决办法吗?

发布于 2024-09-13 02:22:30 字数 1158 浏览 13 评论 0原文

我的 HTML+CSS 图形

我的问题页面的特点是“高中”、“初中”和“小学”图像在除 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:

alt text

Chrome:

alt text

我在这里做错了什么?

编辑:

在此处查看固定版本:非存档图形。上面的链接是为了存档目的保持一致的快照。

My HTML+CSS graphic

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:

alt text

Chrome:

alt text

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

公布 2024-09-20 02:22:30

在页面前面添加 以使浏览器尝试遵守 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.

若言繁花未落 2024-09-20 02:22:30

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

float

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文