Cross Browser css issue with Media query

Full code for mozilla, opera, safari and Chrome:   APPLY CSS
================================================

 @media screen and (max-width: 767px) {

    div.take-me-top p {
            font-size: 10px !important;
        }

    /* moz - Firefox */
        @-moz-document url-prefix() {
            /* firefox-only css goes here */
            div.take-me-top p {
            font-size: 10px !important;
            }
        }

        /* opera */
        x:-o-prefocus,
        div.take-me-top p {
            font-size: 10px !important;
        }

        /* safari */
        _::-webkit-:not(:root:root),
        div.take-me-top p {
            font-size: 10px !important;
        }

    /* IE */
    * div.take-me-top p {
            font-size: 10px !important;
        }
        (or)
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .div.take-me-top p{
        z-index:1 !important;
    }

   /* chrome browser only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     div.take-me-top p {
            font-size: 10px !important;
        }}

@note : div.take-me-top p  is class property name



-------------------------------------------------------------------------------------------
mozilla browser + media query css code:
=======================================

  @-moz-document url-prefix() {
        /* firefox-only css goes here */
        @media screen and (max-width: 767px) {
            div.take-me-top p {
                font-size: 10px !important;
            }
        }
    }

this will work on other browser and media query:

 @media screen and (max-width: 767px) {
    @-moz-document url-prefix() {
        /* firefox-only css goes here */
       
            div.take-me-top p {
                font-size: 10px !important;
            }
        }
    }


opera:
======
p {
    background: green;
    }

x:-o-prefocus, p {
    background: red;
    }

or

/*opera only hack*/
    @media not all and (-webkit-min-device-pixel-ratio:0) { 
        .styled-select select{ 
           width:100%;
    height:24px;
        } 
    } 


safari Only:
=============

_::-webkit-:not(:root:root),
        div.take-me-top p {
            font-size: 10px !important;
        }


IE all Version:
================
* div.take-me-top p {
   font-size: 10px !important;
   }

/* css for ie only */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { }