IE和Chrome内联阻止CSS的不同行为

Question

我有一个代码，其中#page_field是父级，有两个孩子。 所以，我希望这两个区块接连进行。 我所面对的是Chrome正确显示了left_block ： pager_separator_design为30px ，因此30px + 120px （相对左侧）为我提供了150px ，这是应该做的。 但是，即IE，不要添加pager_separator_design width ，因此总剩余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。

Answer 1

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

尝试在您的元素中添加margin: 0 0 0 -6px以查看是否可以解决问题。

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

Answer 2

希望今天，我找到了解决方案和问题：我使用了table，table-row和table-cell。 +在左侧添加了其他emply单元格。 问题是我让IE显示了像IE 7一样的网站。很多星期前我这样做了，却忘记将其关闭。 我的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>

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