Heim  >  Artikel  >  Web-Frontend  >  div+css实现Firefox和IE6兼容的垂直居中_html/css_WEB-ITnose

div+css实现Firefox和IE6兼容的垂直居中_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:30:241026Durchsuche

Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6中则需要借助IE6中css的特点实现垂直居中。为了实现Firefox和IE6兼容的垂直居中,还需要 借助于!important标记。Firefox支持!important标记,而IE6忽略!important标记,因此可以使用! important标记区别Firefox和IE6。
[示例代码]
    


        

            

垂直居中,Firefox only


            

垂直居中,Firefox only


            

垂直居中,Firefox only


        

        

             

                 

                     

垂直居中,IE6 only


                     

垂直居中,IE6 only


                     

垂直居中,IE6 only


                 

             

        

        

             

                 

                     

垂直居中,Firefox IE6 only


                     

垂直居中,Firefox IE6 only


                     

垂直居中,Firefox IE6 only


                 

             

        

    


[div+css的浏览器兼容问题] 水平居中,Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中,Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记,Firefox支持!important标记,IE6忽略!important标记
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn