0

Is there a way that I can set different top value for different browser? For example, top:17px for Chrome, but top:40px for Firefox?

I tried to set the top value for a class, but the top value seems works differently in different browsers, for example, I set the top:17px for the search bar, it works for Chrome, Safari and Opera, but when it comes to Firefox, the position of the search bar is way too high.

Then I adjusted it to top:40px then they are the same. So just wondering if there is a way that I can set different top value to Firefox browser,

Like -moz-top: 40px? But it didn't work

Novus
  • 11
  • 4
  • 2
    Looks like [XY Problem](http://xyproblem.info/) to me. Could you please update your question with a [mcve] and explain what you're trying to achieve? – Kosh Jan 19 '19 at 01:56

2 Answers2

1

Not by using CSS, no. Vendor prefixes like -moz- or -webkit- are used for experimental features which haven't been fully standardized yet. They are not intended as a way of altering behavior for specific browsers; vendor prefixed versions of standard selectors like top have never existed.

If you are seeing differences in how your web site renders on different browsers, you are probably running into differences in the user agent stylesheet for these browsers. (For instance, since you mention a search bar, the margins or padding on the input element may be different.) Use the web inspector in each browser to determine where the difference is arising, then apply properties to the appropriate elements to make the behavior consistent across all browsers, rather than trying to correct for inconsistencies after the fact.

-1

I don't think it's possible to target different browser in the same file, but you could use Javascript Browser Detection for this. 

    if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="../assets/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
    document.write('<'+'link rel="stylesheet" href="../assets/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="../assets/explorerStyles.css" />');
}

For old IE browsers you could use these:

   <!--[if IE]>
   <link rel="stylesheet" type="text/css" href="assets/myIEGeneralStyle.css" />
   <![endif]-->
   <!--[if IE 6]>
   <link rel="stylesheet" type="text/css" href="assets/myIE6Style.css" />
   <![endif]-->
   <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="assets/myIE7Style.css" />
   <![endif]-->
   <!--[if IE 8]>
   <link rel="stylesheet" type="text/css" href="assets/myIE8Style.css" />
   <![endif]-->
SaroGFX
  • 699
  • 6
  • 20
  • 1
    Multiple problems here. 1) Browser sniffing is highly error-prone, as many browsers include inconsistent or conflicting information in their user agent string. For example, _all_ modern browsers have a UA which begins with the string "Mozilla". 2) Conditional comments are no longer supported by any current version of MSIE. –  Jan 19 '19 at 01:55
  • True, I wouldn't recommend using any of these to fix markup inconsistencies across browsers. – SaroGFX Jan 19 '19 at 01:57