Excuse Me, it’s not the right font size!

Excuse Me, it’s not the right font size!

We all know the case. You design the web for whole world and for Internet Explorer users. There’d always be something, that needs to be readjusted for this exceptional browser. Recently I was asked to fix bug on one of our sites, where map icons were not displayed correctly, which is presented on the image below.

The overlaying white negative icon of fork and knife is placed in as a content of pseudo-element ::before. And the styles attached here are as follows:

.map-icon:before {
    left: -2px;
    top: 3px;
    font-size: 2.6em;
}

At first, I changed value of font-size in inspector by series of trials and errors and then I added received value (1.3em) to a new rule in CSS file. As a result, I ended up with almost twice as big placeholders.

Explanation

 

… and I didn’t have to go IE specific!

As a kind surprise, I didn’t have to

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* whatever you want to apply in IE 10+ goes here */
}

 

No Comments

Post a Comment