我有一个代码,#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。
答案 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>
我希望它会对某人有所帮助。