我想使用object-fit
CSS规则。
MSIE和MS Edge浏览器不支持此功能。
虽然IE有一些多边形填充,但据我所知,没有一个可以在Edge中工作。
例如,Jonathan Neal的polyfill fitie可以在IE上运行,但不能在Edge上运行(至少在我的机器上不能)。这是因为fitie使用了element.currentStyle
和element.runtimeStyle
,这两个JS对象只有MS,在Edge浏览器中不再支持。但是如果我使用window.getComputedStyle(element).getPropertyValue('object-fit')
,Edge什么也不会返回。
因此,如何在MS Edge browser中使用JavaScript获取object-fit
规则的CSS规则的值?
img = document.getElementById('i');
s = self.getComputedStyle(img);
console.log('object-fit: ', s.getPropertyValue('object-fit'));
console.log('-ms-object-fit: ', s.getPropertyValue('-ms-object-fit'));
div {
width: 400px;
height: 320px;
overflow: hidden;
}
#i {
display: block;
width: 100%;
height: 100%;
-ms-object-fit: cover;
object-fit: cover;
}
div {
box-sizing: border-box;
border: 1px solid gold;
}
div,
p {
font-family: sans-serif;
font-size: 20px;
width: 400px;
margin: 0 auto;
}
<p>img: Has object-fit CSS rule, but does not appear in MS Edge JavaScript log</p>
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
编辑
这肯定是可能的,因为它并没有被完全忽略。
开发人员工具显示卷曲带下划线的规则
奖励问题:
是否有适用于边缘的object-fit的多边形填充?
https://stackoverflow.com/questions/45051489
复制相似问题