the CSS code below firefox and internet explorer does not work. How do I fix it?

Question

the CSS code below firefox and internet explorer does not work. How do I fix it ?

thanks.

body {
    background:white;
}
.slider-text {
    color:#999;
    font-size:24px;
    font-weight:normal;
    font-family:"Helvetica Neue", Helvetica, sans-serif;
    letter-spacing:-1px;
    width:360px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #999), color-stop(0.750, #999), color-stop(0.875, red), color-stop(1, #999));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: glint 5.5s infinite;
}
@-webkit-keyframes glint {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 360px 0;
    }
}

<div class="slider-text">Continue the Tour</div>

Answer 1

You're using 1 value and 3 properties with the vendor prefix -webkit-:
-webkit-gradient, -webkit-background-clip, -webkit-text-fill-color and -webkit-animation
used by the WebKit rendering engine used by Apple Safari, Google Chrome and Opera 15+ for some properties and some values.

First, check about each property on MDN (Mozilla Developer Network), it has a very good documentation. Just search "mdn gradient" on DuckDuckGo or Google or another search engine (without the dash and forget about the prefix too).
There, you'll learn about its use, its allowed values and there's a compatibility table at the end of each page. If a property needed -moz- prefix till Firefox 4, well forget it, it's useless now. If it's -ms- on IE9, well you probably still need it, etc

Double check with this great resource: caniuse (there's a "Show all versions" button that is often useful)

You must know which browsers you want to be compatible with (IE8 or not, etc) and by browsers I mean version numbers ;) and how it should degrade on others…

Now that you know which prefix are needed, you can write down something like:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box; /* protip: always write the unprefixed one in last position */
}

.rounded {
 border-radius: 4px; /* no prefix, webkit and Firefox haven't needed them for ages. Used to but not nowadays */
}

Once you've understood what is needed and practiced for a few weeks, you can use tools like Autoprefixer (node plugin, grunt, gulp, in other tools like CSS postprocessor Pleeease, etc)