Browser Hacks for CSS, IE10+, Safari 5 specifically

No one ever really wants to take shortcuts and wind up with spaghetti. But sometimes you have to. IE 10/11 are great browsers and are much more compliant with standards, but today I still had to use a hack to get something simple done. And thanks to http://www.browserhacks.com/ for showing me the way.

for IE 10/11 you use this:

_::-ms-reveal,

at the beginning of your selector. the selector will remain the exact same but it will only be interpreted by IE10+

so this is the original:

.sf-menu.sf-style-default a {/*092713 hack for IE10 and superfish super menu*/

font-size:104%;
}

and this is what you have afterwards to be interpreted only by IE.

_::-ms-reveal,.sf-menu.sf-style-default a {/*092713 hack for IE10 and superfish super menu*/
font-size:104%;
}

Note that the comment is mine and not needed. the only thing being changed is the font size. simple change but effective for a situation where I COULD NOT get the selector to work consistently despite all claims by MS.

This one works for Safari in that it doesn’t apply itself to Chrome, which would be the usual behavior.

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari only override */
::i-block-chrome,.sf-menu.sf-style-default a {
padding-bottom: 10px;
padding-right: 23px;
font-size: 100%}
}

You can see that the only important part is where it blocks chrome. This should work with any selector

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: