IE8/FireFox下容器水平垂直布局问题:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd" >
< html >

< head >
< meta  http-equiv ="X-UA-Compatible"  content ="IE=EmulateIE8"   />

< title ></ title >

</ head >

< body >
< div  style ="width:400px;height:400px;margin:0px auto;" > <!-- @注释1 -->
< div  style ="width:400px;height:400px;background-color:Blue;display:table-cell;vertical-align:bottom;" > <!-- 将div设置为display:table-cell就可以通过vertical-align来设置内部元素的垂直布局,因为设置为display:table-cell的元素margin将失效要让其水平居中就要在外层再加上个非display:table-cell的元素来设置margin来让其水平居中(如:@注释1) -->
看!连文字也垂直居下了
< table  style ="width:100px;height:100px;background-color:Yellow;margin:0px 0px 0px auto;" > <!-- 通过margin来设置table在div的水平布局，现在margin:0px 0px 0px auto;表示水平居右,margin中auto表示本容器的外边距为本容器到父级容器的距离宽度 -->
< tr >
< td  style ="vertical-align:bottom;font-size:8px;" > <!-- td本来就是table-cell元素，因此可以通过vertical-align来设置内部元素的垂直布局 -->
看!连文字也垂直居下了
< div  style ="width:25px;height:25px;background-color:Green;margin:0px 0px 0px auto;" ></ div > <!-- 通过margin来设置div在table(td)的水平布局，现在margin:0px 0px 0px auto;表示水平居右,margin中auto表示本容器的外边距为本容器到父级容器的距离宽度 -->
</ td >
</ tr >
</ table >
</ div >
</ div >
</ body >

</ html >

可能的值

值	描述
margin-top margin-right margin-bottom margin-left	设置针对边距的属性。 值可以是： 百分比（基于父对象总高度或宽度的百分比） 长度值（定义一个固定的边距） auto（浏览器设定的值）。 默认值：未定义。

例子

四个边距均为10px：

h1 {margin: 10px}

顶边距和底边距为10px，左边距和右边距是父元素宽度的2%：

h1 {margin: 10px 2%}

顶边距为10px，左边距和右边距是父元素宽度的2%，底边距是-10px：

h1 {margin: 10px 2% -10px}

顶边距为10px，右边距是父元素宽度的2%，底边距是-10px，而左边距由浏览器设置：

h1 {margin: 10px 2% -10px auto}

转载于:https://www.cnblogs.com/OpenCoder/archive/2009/09/10/1563889.html