CSS border-radius in IE with injected html
Question
I know that as of IE9 border-radius is available for IE. However, when I apply a border-radius of 50%, in Firefox this shows up as a circle. In IE, it shows up as just a small curved border. Is there a way to achieve the 'circle image' affect in IE? Going into the dev tools for IE reveals that setting the border-radius to any value doesn't produce the circle (it acts as if there is a cap).
Note: I do have
<!DOCTYPE html>
In the root html page, however this is content injected by angular, so I'm worried that some header in that is what is causing my problem. The start of the injected content is:
<?xml version="1.0" encoding="UTF-8"?><div xmlns:atom="w3.org/2005/Atom"; xmlns:dc="purl.org/dc/elements/1.1/"; class="shouts">
Update: Final solution was to switch padding around image to margin (and adjust image size accordingly). For some reason, IE wouldn't use both the padding and the border-radius together.
1 answers
solution1
0 2016-08-15 17:15:56
For full circle just use:
border-radius: 1000px;
In some browsers setting border radius to percent is relative to element's width.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.