IE 和 Chrome 内联块 css 不同的行为答案

【问题标题】：IE and Chrome inline-block css different behaviorIE 和 Chrome 内联块 css 不同的行为
【发布时间】：2013-10-03 11:20:03
【问题描述】：

我有一个代码，其中#page_field 是父母并且有两个孩子。所以，我希望这两个街区一个接一个。我面临的是铬显示left_block 正确：pager_separator_design 是30px 宽，所以30px + 120px（相对左）给我150px，这就是应该做的。但是 IE，不要添加 width 的 pager_separator_design 所以总剩下 120 是错误的。 Firefox 确实喜欢 Chrome。我能做什么？
HTML

<div id="page_field"> 
    <div id="pager_separator_design"> 
    </div> 
    <div id="left_block">
    </div> 
</div>

CSS

#page_field
{
    margin-right: auto;
    margin-left:0px;
    width: 1000px;
    background-color: #FFFFFF;
    height:auto;
    display: table;
}

#pager_separator_design
{
    position:relative;
    display: inline-block;
    left: 120px;
    background-image: url('separator_new.png'); 
    width:30px;
    height: 100%;
    z-index:10;
}
#left_block
{   
    vertical-align: top; 
    position:relative;
    left:120px;
    display: inline-block;
    width:850px;
    margin:0;
    padding:0;
}

我正在使用 IE10。

【问题讨论】：

每当您发布基于 IE 的问题时，请说明它是哪个版本，并提供 HTML 代码或可能jsfiddle.net。
好建议。版本 10。
你在使用reset.css

标签： html css internet-explorer google-chrome cross-browser

【解决方案1】：

尝试水平对齐元素时，显示内联块存在边距问题。我认为大约 6px 不应该存在（通常在 IE 中）。

尝试将margin: 0 0 0 -6px 添加到您的元素中，看看是否能解决问题。

警告：不确定我是否完全理解这个问题，所以这有点猜测。

【讨论】：

不，它不起作用。我补充说，，它部分解决了问题，但是您有其他好的解决方案吗？
我需要查看更多代码，这只是猜测。在 jsfiddle.net 上放一个例子
@Tigran This jsfiddle 与您的问题很多不同。如果问题包含所有相关部分来显示您的问题，那么就创建一个 jsfiddle。如果需要整个 jsfiddle 来显示问题，请相应地调整问题。

【解决方案2】：

希望今天，我找到了解决方案和问题：我使用了表格、表格行和表格单元格。 + 在左侧添加了额外的 emply 单元格。问题是我制作了像 IE 7 这样的 IE 展示网站。我是在数周前完成的，却忘记将其关闭。我的CSS：

 #page_field
{
    margin: 0px;
    padding:0px;
    margin-left:0px;
    width: 1000px;
    background-color: #FFFFFF;
    display: table;
    position:relative;
}
#middle
{
    display:table-row;
}
#left_block
{
    width:120px;
    display: table-cell;
    margin:0;
    padding:0;
}
#pager_separator_design
{
    position:relative;
    display: table-cell;
    background-image: url('separator_new.png'); 
    background-repeat:repeat-y;
    width:30px;
    height: 100%;
    z-index:10;
    margin:0;
    padding:0;
}
#right_block
{   
    vertical-align: top; 
    position:relative;
    display: table-cell;
    width:850px;
    margin:0;
    padding:0;
}

代码是：

<div id="page_field">
    <div class="middle">
        <div id="left_block">
        </div>
        <div id="pager_separator_design">
        </div>
        <div id="right_block">
        </div>
    </div>
</div>

我希望它会对某人有所帮助。

【讨论】：