margin:0仅在IE中自动不起作用

Question

margin:0仅在IE中自动不起作用

我试图#logo_alt使用包含图像的div居中margin: 40px auto 0px auto;.

问题::在Chrome上,它看起来很完美,但在IE中,这个包含img的div与其父容器的左侧对齐#header_organizer.我只是无法弄清楚为什么会发生这种情况,以及如何在IE中修复它!任何帮助非常感谢:)

HTML

<div id="header_organizer">
    <div id="user_bar">...</div>
    <div id="user_bar_menu">...</div>
    <div id="logo_alt">                <!-- <<<<< We are centering this div! -->
       <img src="logo.png" \>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS

#header_organizer {
    width: 100%;
    height: 180px;
    background: black url(../images/template/header.png);
    float: left;
    position: relative;
    z-index: 1000;
}

#logo_alt {
    width: 256px;
    height: 55px;
    margin: 40px auto 0px auto;
}


#user_bar {
    height: 30px;
    color: #CCC;
    font-size: 13px;
    margin-right: 10px;
    padding: 0px 5px;
    float: right;
    cursor: pointer;
    position: relative;
    z-index: 3000;
}

#user_bar_menu {
    width: 200px;
    height: 165px;
    background: white;
    border: 1px solid #BEBEBE;
    float: right;
    position: absolute;
    top: 30px;
    right: 10px;
    -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    display: none;
    z-index: 1000;
    border-image: initial;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Bol*_*ock 10

HTML文件开始于<html xmlns="http://www.w3.org/1999/xhtml">.

那是你的问题.您需要为您的文档提供XHTML doctype声明,因为您的根元素xmlns无论如何都具有该属性.然后IE将在标准模式下工作并margin: 0 auto正确渲染您的样式.

有趣的事实:与流行的看法相反,IE6*可以在标准模式下渲染`margin:0 auto`.这是IE5.x不能.IE的怪癖模式模拟IE5.x,而不是IE6,因为IE6有自己的标准模式.但当然,现在是2012年,没有人会阅读或投票评论这个评论.海象,鸭嘴兽和独角兽. (23认同)

归档时间：	13 年，8 月前
查看次数：	17388 次
最近记录：	12 年，2 月前