Mozilla firefox using "@media screen and (-webkit-min-device-pixel-ratio:0)"

good afternoon, I made a target to a html button with normal default style, and I noticed it does not style properly on mozilla, so I used the default style for mozilla and used "@media screen and (-webkit-min-device-pixel-ratio:0)" to target chrome, now my problem is that Mozilla is using "@media screen and (-webkit-min-device-pixel-ratio:0)" for its style. I mean instead of using the mozilla css which is the default style, it goes on to use webkit chrome styling thereby, it does not respond to the default style. CODE

<div class="fruits_holder_text_1">
<span>The <br/> Splash <br/> Strawberries</span>
<a class="fruits_holder_text_1_a" href="fruits/strawberries" title="Shop Now"><span>Shop Now</span> &nbsp; &nbsp;<img data-src="file_image/right2.png"></a>
</div>

  .fruits_holder_text_1 > .fruits_holder_text_1_a { /*mozilla*/
position:absolute;
margin-left:-37px;
margin-top:85px;
}


@media screen and (-webkit-min-device-pixel-ratio:0){
.fruits_holder_text_1 > .fruits_holder_text_1_a {
position:absolute;
margin-left:-17px;
margin-top:10px;
}
}

//WHEN I CHECKED MY INSPECT ELEMENT ON FIREFOX, HERE IS WHAT I FOUND, MOZILLA IS USING CHROME WEBKIT, IMAGE BELOW.