Why does my button look different i IE?

Question

I have tried to find a solution for my button to look correct in Internet Explorer browsers, but not succeeded. What can be the problem here? Here is the link to the site: www.vivids.se. Looking forward to an solution! :)

Here is the html:

<div class="share-wrapper">
 <span class="share-button">Dela</span>
 <a class="social-media-button" id="facebook" href="#">Facebook</a>
 <a class="social-media-button" id="twitter" href="#">Twitter</a>
</div>

Here is the css:

.share-button,
.social-media-button {
 font-weight: 600;
 display: inline-block;
 border-radius: 5px;
}

.share-button {
  padding: 0px 6px;
  border: solid 2px;
  border-color: #00d9ef;
  color: #00d9ef;
  cursor: pointer;
}

.share-button::after {
 content: url('img/share.svg');
 width: 13px;
 display: inline-block;
}

.social-media-button {
 padding: 2px 6px;
 background-color: #00d9ef;
}

#facebook::before {
 content: url('img/facebook.svg');
}

#twitter::before {
 content: url('img/twitter.svg');
}

#facebook::before,
#twitter::before {
 width: 13px;
 display: inline-block;
 margin-right: 5px;
}

The button to the left is Safari (MacOS Sierra). The button to right is Internet Explorer 11 (Windows 7).

Check out this similar question. I think there is a good chance it is your problem. http://stackoverflow.com/questions/30415980/is-there-a-way-for-svg-symbols-to-be-responsive-cross-browser — Paul LeBeau, Oct 25 '16 at 10:12

score 0 · Answer 1 · answered Oct 25 '16 at 07:41

0

Maybe it is a cache problem? I opened it in IE11 and it looks like you said it should be.

answered Oct 25 '16 at 07:41

Christian

152
1
13

its the version problem of IE – safin chacko Oct 25 '16 at 07:46
Actually I have not enabled cache on the site yet. So it is something else. – Vrea Oct 25 '16 at 08:02

Why does my button look different i IE?

1 Answers1