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

川长思鸟来 2022-04-01 13:50 176阅读 0赞

![None.gif][] <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-  
![None.gif][]  
![None.gif][]transitional.dtd" >   
![None.gif][] < html >   
![None.gif][]  
![None.gif][] < head >   
![None.gif][] < meta  http-equiv ="X-UA-Compatible"  content ="IE=EmulateIE8"  />   
![None.gif][]  
![None.gif][] < title ></ title >   
![None.gif][]  
![None.gif][] </ head >   
![None.gif][]  
![None.gif][] < body >   
![None.gif][] < div  style ="width:400px;height:400px;margin:0px auto;" >    
![None.gif][] < div  style ="width:400px;height:400px;background-color:Blue;display:table-cell;vertical-align:bottom;" >    
![None.gif][]看!连文字也垂直居下了  
![None.gif][] < table  style ="width:100px;height:100px;background-color:Yellow;margin:0px 0px 0px auto;" >    
![None.gif][] < tr >   
![None.gif][] < td  style ="vertical-align:bottom;font-size:8px;" >    
![None.gif][]看!连文字也垂直居下了  
![None.gif][] < div  style ="width:25px;height:25px;background-color:Green;margin:0px 0px 0px auto;" ></ div >    
![None.gif][] </ td >   
![None.gif][] </ tr >   
![None.gif][] </ table >   
![None.gif][] </ div >   
![None.gif][] </ div >   
![None.gif][] </ body >   
![None.gif][]  
![None.gif][] </ html >   
![None.gif][]

## 可能的值 ##

<table> 
 <tbody> 
  <tr> 
   <th><span style="font-size:10pt;">值</span></th> 
   <th><span style="font-size:10pt;">描述</span></th> 
  </tr> 
  <tr> 
   <td> 
    <ul> 
     <li><span style="font-size:10pt;">margin-top </span></li> 
     <li><span style="font-size:10pt;">margin-right </span></li> 
     <li><span style="font-size:10pt;">margin-bottom </span></li> 
     <li><span style="font-size:10pt;">margin-left </span></li> 
    </ul></td> 
   <td> <p><span style="font-size:10pt;">设置针对边距的属性。</span></p> <p><span style="font-size:10pt;">值可</span><span style="font-size:10pt;">以是：</span></p> 
    <ul> 
     <li><span style="font-size:10pt;">百分比（基于父对象总高度或宽度的百分比） </span></li> 
     <li><span style="font-size:10pt;">长度值（定义一个固定的边距） </span></li> 
     <li><span style="font-size:10pt;">auto（浏览器设定的值）。 </span></li> 
    </ul><p><span style="font-size:10pt;">默认值：未定义。</span></p></td> 
  </tr> 
 </tbody> 
</table>

## 例子 ##

四个边距均为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}

[None.gif]: /images/20220401/a5076ad91be645d281a03e0c8fc82d2c.png