1

In IE10 and IE11 I must use SVG tag for images.
The images are rendered properly, but not their styles (border-radius).
how can I apply the styles (border-radius) to the images in IE10+.

border-radius: 4px;

I need to support all major browsers (Webkit, Mozilla, IE8+)

My example
http://jsfiddle.net/KDtAX/3298/
Here you can see (In all browsers, I think, except IE10+) the images has round-corners, but when you open it in IE10+, it doesn't.

I found some post describing a possible solution.
Here is a live example

Simon Arnold
  • 15,849
  • 7
  • 67
  • 85
demo
  • 6,038
  • 19
  • 75
  • 149
  • 1
    Do you just want to add rounded corners to ie10 and ie11? – Stefan Nov 07 '14 at 15:15
  • @Stefan, sure. Done. – demo Nov 07 '14 at 15:19
  • for IE8+ you have to use something found here: http://stackoverflow.com/questions/9426979/border-radius-for-ie8 – docodemore Nov 07 '14 at 15:46
  • @MatthewA.McFarland, IE8 - it's such browser where i don't need round-corners :) But i newest browsers - yes – demo Nov 07 '14 at 15:52
  • Yeah what is strange is MSDN blog says that it supports round corners, maybe you need to wrap the img element in a container that uses rounded corners. Maybe MS does not support it on the img tag itself but on other elements. That is my best guess. – docodemore Nov 07 '14 at 15:54

1 Answers1

0

Working: http://jsfiddle.net/KDtAX/3304/

New code:

svg, img {
    border-radius: 8px;
    border: thin solid black;
}

I think all that was needed was a rule for svg, and img.

docodemore
  • 1,074
  • 9
  • 19
  • let me know if I got this wrong I'll delete my answer :) – docodemore Nov 07 '14 at 16:06
  • thanks :). But here is other problem : http://i.imgur.com/Msw9Dc7.png Need to work with sizes. I this must be javascript as i don't know what image would be in `svg` – demo Nov 07 '14 at 16:09
  • When you say sizes, what do you mean? would you be able to use max-width? padding? etc? – docodemore Nov 07 '14 at 16:11
  • http://jsfiddle.net/KDtAX/3298/ as you can see here author set width, height and viewBox. This values are equal to image size that are also setted. In my case i get first image from collection, so i don't know it size. I need here some othe js that will detect image size and then set it to svg – demo Nov 07 '14 at 16:15
  • would this help??? http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript – docodemore Nov 07 '14 at 16:22
  • ok, now i DO IT! Have some problem with order of executing scripts – demo Nov 07 '14 at 17:04