difference in positioning IE Chrome and Firefox

Question

I have made this:

 #basketLinkId .buttonCart { padding-top: 8px; padding-right:17px; padding-bottom:12px; padding-left:5px; border-radius: 6px; color: #fff; text-decoration: none; background-color: #28a8e0; float: right; position: relative; height:10px; } #itemCountForCart{ font-size:9pt; } .cartCornerIcon, .cartCornerTextBestellen { display: inline-block; font-size:10pt; margin-left:0.20em; } #basketLinkId .svgCartIcon { width: 36px; height: auto; vertical-align: middle; } #itemCountForCart { position: absolute; top: 10px; left: 16px; min-width: 2rem; text-align: center; }

 <a href="#" class="cartLinkClass" id="basketLinkId"> <div class="buttonCart"> <div class="cartCornerIcon"> <!-- svg image to code : https://jakearchibald.github.io/svgomg/ --> <svg class="svgCartIcon" xmlns="http://www.w3.org/2000/svg" width="141px" height="88px" viewBox="0 0 6.7884028 298.54643"><path d="m 241.22792,213.72354 -282.900379,0 -118.939781,-189.976486 -73.82728,0 0,-23.7470599713325 96.06009,0 L -19.442559,189.97648 l 260.670479,0 M 52.037289,263.61893 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.2828876,0 -34.927498,-15.64461 -34.927498,-34.9275 0,-19.28289 15.6446104,-34.9275 34.927498,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 zm 179.627041,0 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.28289,0 -34.9275,-15.64461 -34.9275,-34.9275 0,-19.28289 15.64461,-34.9275 34.9275,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z"/></svg> </div> <div id="itemCountForCart"> 100 </div> <div class="cartCornerTextBestellen">Bestellen</div> </div> </a>

In Chrome it looks like this:

And in Firefox like this:

But in internet explorer it looks like this:

Any idea why this happen. Plus how can i move the text "Bestellen" a bit up. Because if I move it with margin, the icon will also move while i seperated them in different divs.

Hope anyone can help me out a bit. Thank you.

Answer 1

Internet Explorer 9-11 has known issues with scaling SVG images and this is likely a side-effect of this :

The general recommendation is to add explicit height and width properties, which you could try with something like :

#basketLinkId .svgCartIcon {
  /* Setting explicit widths and heights can help rendering SVG issues */
  width: 36px;
  height: 20px;
  vertical-align: middle;
}

Example using explicit height/width

 #basketLinkId .buttonCart { padding-top: 8px; padding-right: 17px; padding-bottom: 12px; padding-left: 5px; border-radius: 6px; color: #fff; text-decoration: none; background-color: #28a8e0; float: right; position: relative; height: 10px; } #itemCountForCart { font-size: 9pt; } .cartCornerIcon, .cartCornerTextBestellen { display: inline-block; font-size: 11pt; margin-left: 0.20em; } #basketLinkId .svgCartIcon { width: 36px; height: auto; vertical-align: middle; } #itemCountForCart { position: absolute; top: 10px; left: 16px; min-width: 2rem; text-align: center; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <a href="#" class="cartLinkClass" id="basketLinkId"> <div class="buttonCart"> <div class="cartCornerIcon"> <!-- svg image to code : https://jakearchibald.github.io/svgomg/ --> <svg class="svgCartIcon" xmlns="http://www.w3.org/2000/svg" width="141px" height="88px" viewBox="0 0 6.7884028 298.54643"> <path d="m 241.22792,213.72354 -282.900379,0 -118.939781,-189.976486 -73.82728,0 0,-23.7470599713325 96.06009,0 L -19.442559,189.97648 l 260.670479,0 M 52.037289,263.61893 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.2828876,0 -34.927498,-15.64461 -34.927498,-34.9275 0,-19.28289 15.6446104,-34.9275 34.927498,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 zm 179.627041,0 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.28289,0 -34.9275,-15.64461 -34.9275,-34.9275 0,-19.28289 15.64461,-34.9275 34.9275,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z" /> </svg> </div> <div id="itemCountForCart">100</div> <div class="cartCornerTextBestellen">Bestellen</div> </div> </a> </body> </html>

difference in positioning IE Chrome and Firefox

Question

1 answers

solution1
2 ACCPTED 2016-05-25 14:27:22

difference in positioning IE Chrome and Firefox

Question

1 answers

solution1 2 ACCPTED 2016-05-25 14:27:22

solution1
2 ACCPTED 2016-05-25 14:27:22