CSS to be changed to be compatible with all the browsers

Using css: CSS to be changed to be compatible with all the browsers on newest questions tagged css – Stack Overflow

html, body {
        margin: 0px;
        padding: 0px;
        font: normal 14px/16px Helvetica, Sans-serif;
    }
    body {
        background: #cbd2d8;
        background-image:
            -webkit-gradient(linear, left top, right top,
                from(#c5ccd4),
                color-stop(0.75, #c5ccd4),
                color-stop(0.75, transparent),
                to(transparent));
        -webkit-background-size: 5px 100%;
        background-size: 5px 100%;
        -webkit-user-select: none;
    }
    header.navigation-bar {
        position: relative;
        width: 10display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack:justify;
        -webkit-box-sizing: border-box;0%;

        height: 45px;
        padding: 6px 10px;
        background-image:
            -webkit-gradient(linear, left top, left bottom,
                from(#b2bbca),
                color-stop(0.25, #a7b0c3),
                color-stop(0.5, #909cb3),
                color-stop(0.5, #8593ac),
                color-stop(0.75, #7c8ba5),
                to(#73839f));
        border-top: 1px solid #cdd5df;
        border-bottom: 1px solid #2d3642;
    }
    header.navigation-bar.black {
        position: relative;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack:justify;
        -webkit-box-sizing: border-box;
        height: 45px;
        padding: 6px 10px;
        background-image:
            -webkit-gradient(linear, left top, left bottom,
                from(#636363),
                color-stop(0.25, #424242),
                color-stop(0.5, #202020),
                color-stop(0.5, #000000));
        border-top: 1px solid #858585;
        border-bottom: 1px solid #858585;
    }
    h1 {
        -webkit-box-flex: 1;
        text-align: center;
        margin: 0px;
        font: bold 20px/32px Helvetica, Sans-serif;
        letter-spacing: -1px;
        text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
        color: #fff;
    }

    h2 {
        font-size: 16px;
        line-height: 22px;
        text-shadow: 0 -1px 1px #fff;
        color: #666;
        text-align: center;
    }

    /* Bordered Button Styles */
    .button.bordered {
        -webkit-box-shadow: 0 1px 1px #9aa5bb, 0 -1px 1px #8e96a5;
        border: solid 1px #54617d;
        border-color: #484e59 #54617d #4c5c7a #54617d;
        display: inline-block;
        cursor: pointer;
        padding: 0px 10px;
        font-size: 12px;
        line-height: 28px;
        height: 30px;
        margin-top: 1px;
        -webkit-box-sizing: border-box;
        -webkit-border-radius: 5px;
        background-image:
            -webkit-gradient(linear, left top, left bottom,
                from(#92a1bf),
                color-stop(0.25, #798aad),
                color-stop(0.5, #6276a0),
                color-stop(0.5, #556a97),
                color-stop(0.75, #566c98),
                to(#546993));
        color: #fff;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
    }
    .button.bordered:hover, .button.bordered.touched {
        background-image:
            -webkit-gradient(linear, left top, left bottom,
                from(#7d88a5),
                color-stop(0.25, #58698c),
                color-stop(0.5, #3a4e78),
                color-stop(0.5, #253c6a),
                color-stop(0.75, #273f6d),
                to(#273f6d));
        -webkit-tap-highlight-color: transparent;
    }
    /* End Bordered Button Styles */

    /* Back Bordered Button Styles */
    .button.bordered.back {
        padding: 0px 7px 0px 3px;
        margin-left: 10px;
        position: relative;
    }
    .button.bordered.back > span {
        position: relative;
        z-index: 1;
    }
    .button.bordered.back > span.pointer {
        z-index: 0;
        background-image:
            -webkit-gradient(linear, left top, right bottom,
                from(#92a1bf),
                color-stop(0.3, #798aad),
                color-stop(0.51, #6276a0),
                color-stop(0.51, #556a97),
                color-stop(0.75, #566c98),
                to(#546993));
        border-left: solid 1px #484e59;
        border-bottom: solid 1px #9aa5bb;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-bottom-left-radius: 4px;
        height: 23.5px;
        width: 23.5px;
        display: inline-block;
        -webkit-transform: rotate(45deg);
        -webkit-mask-image:
            -webkit-gradient(linear, left bottom, right top,
                from(#000000),
                color-stop(0.5,#000000),
                color-stop(0.5, transparent),
                to(transparent));
        position: absolute;
        left: -9px;
        top: 2.5px;
        -webkit-background-clip: content;
    }
    .button.bordered.back:hover > span.pointer, .button.bordered.back.touched > span.pointer {
        background-image:
            -webkit-gradient(linear, left top, right bottom,
                from(#7d88a5),
                color-stop(0.3, #58698c),
                color-stop(0.51, #3a4e78),
                color-stop(0.51, #253c6a),
                color-stop(0.75, #273f6d),
                to(#273f6d));
    }

    /* End Back Bordered Button Styles */

    /* Next Bordered Button Styles */
    .button.bordered.next {
        padding: 0px 3px 0px 7px;
        margin-right: 10px;
        position: relative;
    }
    .button.bordered.next > span {
        position: relative;
        z-index: 1;
    }
    .button.bordered.next > span.pointer {
        z-index: 0;
        background-image:
            -webkit-gradient(linear, left top, right bottom,
                from(#92a1bf),
                color-stop(0.3, #798aad),
                color-stop(0.51, #6276a0),
                color-stop(0.51, #556a97),
                color-stop(0.75, #566c98),
                to(#546993));
        border-right: solid 1px #9aa5bb;
        border-top: solid 1px #484e59;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-top-right-radius: 4px;
        height: 23.5px;
        width: 23.5px;
        display: inline-block;
        -webkit-transform: rotate(45deg);
        -webkit-mask-image:
            -webkit-gradient(linear, right top, left bottom,
                from(#000000),
                color-stop(0.5,#000000),
                color-stop(0.5, transparent),
                to(transparent));
        position: absolute;
        right: -9px;
        top: 2.5px;
        -webkit-background-clip: content;
    }
    .button.bordered.next:hover > span.pointer, .button.bordered.next.touched > span.pointer {
        background-image:
            -webkit-gradient(linear, left top, right bottom,
                from(#7d88a5),
                color-stop(0.3, #58698c),
                color-stop(0.51, #3a4e78),
                color-stop(0.51, #253c6a),
                color-stop(0.75, #273f6d),
                to(#273f6d));
    }
    /* End Next Bordered Button Styles */

    header.navigation-bar.black > .button.bordered {
        -webkit-box-shadow: 0 1px 1px #242424, 0 -1px 1px #323232;
        border: solid 1px #54617d;
        border-color: #404040 #262626 #404040 #262626;
        background-image:
            -webkit-gradient(linear, left top, left bottom,
                from(#838383),
                color-stop(0.5, #444444),
                color-stop(0.5, #303030),
                to(#333333));
    }
    header.navigation-bar.black > .button.bordered.back > span.pointer {
        z-index: 0;
        background-image:
            -webkit-gradient(linear, left top, right bottom,
                color-stop(0.05, #838383),
                color-stop(0.5, #444444),
                color-stop(0.5, #303030),
                color-stop(0.98, #333333));
        border-left: solid 1px #262626;
        border-bottom: solid 1px #404040;
        top: 2.35px;
    }

    header.navigation-bar.black > .button.bordered.next > span.pointer {
        z-index: 0;
        background-image:
            -webkit-gradient(linear, left top, right bottom,
                color-stop(0.05, #838383),
                color-stop(0.5, #444444),
                color-stop(0.5, #303030),
                color-stop(0.98, #333333));
        border-right: solid 1px #404040;
        border-top: solid 1px #262626;
        top: 2.35px;
    }
    header.navigation-bar.black > .button.bordered:hover, header.navigation-bar.black > .button.bordered.touched {
        background-image:
            -webkit-gradient(linear, left top, left bottom,
                from(#4286f5),
                color-stop(0.5, #4286f5),
                color-stop(0.5, #194fdb),
                to(#194fdb));
        -webkit-tap-highlight-color: transparent;
    }
    header.navigation-bar.black > .button.bordered.back:hover > span.pointer, header.navigation-bar.black > .button.back.touched > span.pointer, header.navigation-bar.black > .button.bordered.next:hover > span.pointer, header.navigation-bar.black > .button.next.touched > span.pointer {
        background-image:
            -webkit-gradient(linear, left top, right bottom,
                from(#4286f5),
                color-stop(0.5, #4286f5),
                color-stop(0.5, #194fdb),
                to(#194fdb));
    }

Hi,
This is the css for a header and its button. it is styled to be like iPhone header and button. However, it only works in chrome or safari (webkit based browsers).I want this code to converted for it to work in mozilla and IE also..please help

source: http://stackoverflow.com/questions/10948773/css-to-be-changed-to-be-compatible-with-all-the-browsers
Using css: using-css