SharePoint page UI Issue in Chrome

Question

Hi,

We received a Production issue recently where top navigation bar for a SharePoint on-premise page is causing an UI issue in Chrome, while the same page works perfectly fine in IE11. In Chrome, there is small gap between two navigation bars. We tried to change the CSS by giving the below code,

/works for Chrome/
@MEDIA screen and (-webkit-min-device-pixel-ratio:0) {
.classNav{
margin-top:-2px !important;
POSITION: relative;
}
}

/works in IE 10 and above/
@MEDIA screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.classNav{
margin-top: -50px !important;
POSITION: relative;
}
}

Now after adding margin-top as -2px, it works fine in CHROME but not in IE. Should I add any other tags for it to work in both Chrome and IE?

Any help would be appreciated.

Thanks,
Sindhu

Answer 1

Hi @MichaelHan-MSFT

II was able to resolve this issue. The page was by default loading in IE7. I now changed it to IE10 & above and it works fine.

Thanks,
Sindhu

Answer 2

Hi @B N, Sindhu ,

For SharePoint on-premise site, it may not work well with chrome.

I would suggest you use IETab extension for Google Chrome to use the IE rendering engine to display SharePoint pages better: https://chrome.google.com/webstore/detail/ie-tab/hehijbfgiekmjfkfjpbkbammjbdenadd

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.