0

I'm having an issue with chrome just on windows, i'm trying to set a min-height on an image, it renders fine on Mac & Linux but on windows it completley ignores it... does anyone know of a specific way just to target chrome on Windows within css.

Here is what I have so far:

.exp_image {
 background: url(/images/assets/img.jpg);
 background-size: cover;
 margin-top: 30px;
 min-height: 640px;
}

This works fine on chrome on a Mac but seems to add an extra 20 / 30px on chrome on windows.

WebDevB
  • 492
  • 2
  • 7
  • 25
  • please provide a demo of what youve got – Ron.Basco Oct 11 '16 at 08:58
  • Sorry Ron, i've done that now. – WebDevB Oct 11 '16 at 09:03
  • I don't know if there is a css-only solution. If you cannot find an answer refer to http://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript to resolve it with javascript – Focki Oct 11 '16 at 09:05
  • http://stackoverflow.com/questions/9328832/how-to-apply-specific-css-rules-to-chrome-only please refer to this – Ron.Basco Oct 11 '16 at 09:07

2 Answers2

0

Maybe you should try setting a box model. It sounds like the margin or some padding effects the height of the element. This can be avoided with the border-box model

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
Andre Steudel
  • 113
  • 1
  • 7
-1

maybe You should use min-height: 640px !important?

Maciej Wojcik
  • 2,115
  • 2
  • 28
  • 47