IE和Chrome inline-block css的行为不同

时间:2013-10-03 11:20:04

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

我有一个代码,#page_field是父母,有两个孩子。所以,我希望这两个块一个接一个地去。我面临的问题是Chrome显示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。

2 个答案:

答案 0 :(得分:0)

在尝试水平对齐元素时,显示内联块有一个边距问题。我认为它不应该存在大约6px(通常在IE中)。

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

警告:不确定我是否完全理解这个问题,所以这是一个猜测。

答案 1 :(得分:0)

希望今天我找到了解决方案和问题: 我使用了table,table-row和table-cell。 +在左侧添加了额外的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>

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