Question

我正在尝试使用#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>

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

Answer 1

HTML文件以<html xmlns="http://www.w3.org/1999/xhtml">开头。

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

Answer 2

首先，添加doctype以防止IE更多地陷入怪癖。

然后试试这个......

body {
    width: 100%;
}

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

2 个答案: