上次电话面试没答出来,今天重新记录一下。FF下的确难搞...郁闷
加了很多HACK,顺便复习一下!
*+property:value; /* IE7 */
_property:value; /* IE6 */
*property:value; /*IE6、IE7 共用*/
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > IE6/7/8/FF垂直居中 </ title >
< style >
* { margin : 0 ; padding : 0 ; }
#out { display : table ; background-color : #F00 ; width : 300px ; height : 300px ; _position : relative ; overflow : hidden ; }
#mid { vertical-align : middle ; display : table-cell ; _position : absolute ; _top : 50% ; -left : 50% ; }
#in { _position : relative ; _top : -50% ; _left : -50% ; text-align : center ; }
*+html #out { background-color : #F00 ; width : 300px ; height : 300px ; position : relative ; overflow : hidden ; }
*+html #mid { position : absolute ; top : 50% ; left : 50% ; }
*+html #in { position : relative ; top : -50% ; left : -50% ; }
</ style >
</ head >
< body >
< div class ="container" >
< div id ="out" >
< div id ="mid" >
< div id ="in" > FF垂直居中FF直居中 < br />
FF垂直居中F直居中 < br />
FF垂直居中F直居中 < br />
FF垂直居中F直居中 < br />
</ div >
</ div >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > IE6/7/8/FF垂直居中 </ title >
< style >
* { margin : 0 ; padding : 0 ; }
#out { display : table ; background-color : #F00 ; width : 300px ; height : 300px ; _position : relative ; overflow : hidden ; }
#mid { vertical-align : middle ; display : table-cell ; _position : absolute ; _top : 50% ; -left : 50% ; }
#in { _position : relative ; _top : -50% ; _left : -50% ; text-align : center ; }
*+html #out { background-color : #F00 ; width : 300px ; height : 300px ; position : relative ; overflow : hidden ; }
*+html #mid { position : absolute ; top : 50% ; left : 50% ; }
*+html #in { position : relative ; top : -50% ; left : -50% ; }
</ style >
</ head >
< body >
< div class ="container" >
< div id ="out" >
< div id ="mid" >
< div id ="in" > FF垂直居中FF直居中 < br />
FF垂直居中F直居中 < br />
FF垂直居中F直居中 < br />
FF垂直居中F直居中 < br />
</ div >
</ div >
</ div >
</ body >
</ html >