简体   繁体   English

IE中注入HTML的CSS边界半径

[英]CSS border-radius in IE with injected html

I know that as of IE9 border-radius is available for IE. 我知道从IE9开始,边界半径可用于IE。 However, when I apply a border-radius of 50%, in Firefox this shows up as a circle. 但是,当我应用50%的边界半径时,在Firefox中会显示为一个圆圈。 In IE, it shows up as just a small curved border. 在IE中,它显示为只是一个小的弯曲边框。 Is there a way to achieve the 'circle image' affect in IE? 有没有办法在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). 进入IE的开发工具后,发现将边框半径设置为任何值都不会产生圆圈(它的作用就好像有一个上限)。

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. 但是,在html根页面中,这是由angular注入的内容,因此我担心其中的某些标题导致了我的问题。 The start of the injected content is: 注入内容的开始是:

<?xml version="1.0" encoding="UTF-8"?><d‌​iv 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. 出于某种原因,IE不会同时使用padding和border-radius。

For full circle just use: 对于完整的圈子,只需使用:

border-radius: 1000px;

In some browsers setting border radius to percent is relative to element's width. 在某些浏览器中,将边框半径设置为百分比是相对于元素的宽度。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM