Home  >  Article  >  Web Front-end  >  div+css实现Firefox和IE6兼容的垂直居中_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:30:24983browse

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标记
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn