CSS issue - margin top - Google Chrome [closed]

问题

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 6 years ago.

On my Joomla site I have a problem with the margin-top only in Google Chrome. Firefox & IE are ok. There are 27 pixels, the menu is above. I use a theme from Yootheme (but they are not able to solve the problem).

If I enter this style:

ul.menu.menu-dropline {
  margin-top:27px;
}

Google Chrome version is ok; but not Firefox & IE anymore.

Unfortunately I am not the CSS profi - hopefully you can help.

Kind regards winfo

回答1:

I found these lines in your CSS code. Probably they cause the difference in behavior between FF and Webkit browsers.

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;

Quick solution: Add the following to your CSS code.

ul.menu.menu-dropline {
    -webkit-margin-before: 27px;
}

回答2:

The code is a bit strange. You have a few things that doesn't make much sense.

You have on your nav wrapper #menubar a margin-top set for 27 pixels on custom.css then in the same file, another negative margin-top value for your nav element of -20 pixels.

You should remove those two attributes and/or rules:

#menu {
  margin-top: -20px;
}

#headerbar + #menubar {
  margin-top: -27px;
}

来源：https://stackoverflow.com/questions/16117926/css-issue-margin-top-google-chrome