Hello and thanks for the reply.
You can solve the problem with IE 8 and 9 simply entering in the head this string :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Works with Windows 7-8 but I have not tried with XP. (I will let you know)
The real problem is not Safari for PC (never used) but browsers pre-installed in mobiles and tablets (such as Samsung ) that display in the same way. Indeed I use Safari just to see how a website will appear with these browsers. Perhaps it will seem strange, but I know many people who don’t want to use Chrome because they are used to IE, many people who don’t want to install updates … many people who don’t want or don’t know how to install apps in phones and tablets. All these people say “Beautiful website! But it’s wrong !” So I think that for me it’s more professional to try to solve, instead of saying “installs a new app”. Sometimes it’s possible.
So…
for solve flex-box in page with right sidebar:
-I delete display: -webkit-box; for class “content”, “main-wrapper” and “flex”
-I add (in style.css) this special rule for Safari&Co (not valid for Chrome):
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-width: 960px)
{
.flex,.main-wrapper {
display: -webkit-box;
}
}
In this way, the position of the sidebar is correct , but I couldn’t fix the alignment of the articles ( in blog page ) from 680 px to up, which are shown in column ( but at least, it possible read them).
to solve the alignment of the images (in my case sg-images widget in full width):
-I delete (from image.css) display: -webkit-box; for class “.widget .main-wrapper-image” and “.widget .wrapper-image”
-I add (in the same file)
@media screen and (-webkit-min-device-pixel-ratio:0) {
.element {
margin: 0 0 !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-width: 960px) {
.widget .main-wrapper-image, .widget .wrapper-image {
display: -webkit-flex !important;
display: flex !important;
}
} /*this is for Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-width: 1020px) {
.widget .main-wrapper-image, .widget .wrapper-image {
display: -webkit-box !important;
}
}
to fix the alignment of the logo
-I add `@media screen and (-webkit-min-device-pixel-ratio:0) {
.logo-block {
width: 0%;
}
}`
But this is only my personal and intricate solution: the “creature” is your 😀 , have you a better idea?
I hope I’ve been helpful.
