>  기사  >  웹 프론트엔드  >  div+css实现Firefox和IE6兼容的垂直居中_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 12:30:241026검색

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标记
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.