保证金：0自动仅在IE浏览器中无法使用

问题描述

我试图以 margin：40px auto 0px auto; 为中心包含图片的div #logo_alt 。

问题：：在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> <<<<<<<我们正在集中这个div！ - > 
< img src =logo.png\> 
< / div> 
< / div> 
  

CSS

  #header_organizer {
 width：100％; 
 height：180px; 
背景：黑色网址（../ images / template / header.png）; 
 float：left; 
职位：亲属; 
 z-index：1000; 
} 
 
 #logo_alt {
 width：256px; 
 height：55px; 
 margin：40px auto 0px auto; 
} 
 
 
 #user_bar {
 height：30px; 
颜色：#CCC; 
 font-size：13px; 
 margin-right：10px; 
 padding：0px 5px; 
 float：right; 
光标：指针; 
职位：亲属; 
 z-index：3000; 
} 
 
 #user_bar_menu {
 width：200px; 
 height：165px; 
背景：白色; 
 border：1px solid #BEBEBE; 
 float：right; 
位置：绝对; 
 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; 
} 
  

解决方案

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

I am trying to center a div #logo_alt containing an image using margin: 40px auto 0px auto;.

Problem:: On Chrome, it looks perfect, but in IE, this img-containing div is aligned to the left of its parent container #header_organizer. I just cant figure out why this is happening, and how it can be fixed in IE! Any help greatly appreciated :)

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

解决方案

Well there's your problem. You need to give your document an XHTML doctype declaration since your root element has that xmlns attribute anyway. Then IE will work in standards mode and render your margin: 0 auto style correctly.

这篇关于保证金：0自动仅在IE浏览器中无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！