CSS 3后台大小不适用于IE9(CSS 3 background-size not working on IE9)

background-image:url(yellow.jpg); background-size:180px 180px; background-repeat:no-repeat;

上面提到的css在chrome上工作得很好，但ie9无法正确缩放图像+显示图像

background-image:url(yellow.jpg); background-size:180px 180px; background-repeat:no-repeat;

The above mentioned css works perfect on chrome but ie9 is unable to scale images + display images correctly

原文：https://stackoverflow.com/questions/6776580

更新时间：2019-11-18 23:36

最满意答案

你确定你的IE在IE9模式下运行吗？ 您的代码适用于我尝试的任何图像。

(F12打开开发者窗口)

Are you sure your IE runs in IE9 mode? Your code works with any image I tried.

(F12 to open developer window)

相关问答

你确定你的IE在IE9模式下运行吗？ 您的代码适用于我尝试的任何图像。 (F12打开开发者窗口) Are you sure your IE runs in IE9 mode? Your code works with any image I tried. (F12 to open developer window)

有3个限制： 一张表可能包含多达4095个选择器，请参见http://demos.telerik.com/testcases/4095issues.html 一张表可以@最多31张，见http://demos.telerik.com/testcases/BrokenTheme.aspx @import嵌套最多支持4个级别 Microsoft支持/ MSDN参考链接： http://support.microsoft.com/kb/262161 http://blogs.msdn.com/b/iei

...

试试纯JavaScript： function scaleImg() {

var container = document.getElementById('img_src_div');

var img = container.children[0]; // assuming image is first child

// var img = container.getElementsByTagName('img')[0]; // use this one if not

...

对我来说工作非常好，也许你不是像.jpg那样保存图像...... div.one {

width:100px;

height:100px;

background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg);

background-position:center;

background-repeat:no-repeat;

ba

...

Internet Explorer 9及以下版本不支持column-count ; 在版本10之前不会添加支持。重要的是要记住，Modernizr主要用于帮助您了解浏览器的功能，而不是让浏览器具备更多功能。 它通过添加到文档中的特殊类以及用于脚本编写的全局Modernizr对象来实现此目的 。 如果您想要在Internet Explorer 9中支持CSS列，则需要通过其他路径进行操作。 我会建议jQuery Columnizer，因为我过去曾经使用它，并且它对于任何熟悉CSS Column语法的

...

在块元素(如div )上，高度与宽度的工作方式不同。 如果未指定高度，则元素将与其内容一样高。 这是一回事。 height: 100%如果你想让你的div像body一样大，那么height: 100%就是你要去的方法，但诀窍是百分比高度总是来自父亲的身高 。 因此，您必须为所有父项(包括html )设置height: 100%以获得crosss-browser结果。 html,body,#please_expand { height: 100%; }

jsFiddle演示 On block el

...

IE9是否支持CSS线性渐变？ background:#fff;

background-image: -moz-linear-gradient(top, #fff, #000);

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #000));

filter: progid:DXImageTransform.Microsoft.gradient(Gradi

...

IE9或更低版本不支持动画，转换和转换。 IE 10+支持它们，但即使在这种情况下，用户在使用IE时也会遇到很多问题。 最好的办法是使用javascript。 使用javascript，你可以避免CSS3 animations ，甚至在IE中运行你的结果更好。 有关animations, transitions and transformations浏览器兼容性animations, transitions and transformations查看以下链接： https ： //develope

...

根据w3c 规范 ： “背景位置” 百分比 百分比X将图像的X％对齐(对于水平)或向下(对于垂直)对齐点X％跨(对于水平)或向下(对于垂直)对象的填充框。 例如，使用值对“0％0％”，图像的左上角与填充框的左上角对齐。 值对'100％100％'将图像的右下角放置在填充框的右下角。 使用“14％84％”的值对，图像的14％和84％的点位于填充框的14％和84％的位置。 这意味着您在background-position中设置的百分比指定图像的哪个点应与元素中的相同点匹配。 但是当容器和图像的大小相等

...