blocks|key|537044|text|http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|537045|然而，IE中的滤镜并不容易使用，而且它们并不总是与其他css效果相结合……|537046|但IE+9支持scale+https://developer.mozilla.org/en/CSS/transform|537047|entityMap|0|LINK|mutability|MUTABLE|url|1|https://developer.mozilla.org/en/CSS/transform^0|0|1Q|0|0|0|D|1A|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|4]]|O|$5|K|L|M|C|$N|P]]]]

<a href="http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx" rel="nofollow">http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx</a>

although, filters in IE isn't easy to use and they are not always combined with other css effects....

but IE 9 support scale
<a href="https://developer.mozilla.org/en/CSS/transform" rel="nofollow">https://developer.mozilla.org/en/CSS/transform</a>

blocks|key|537229|text|IE9支持transform：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|537230|-ms-transform:+scale(0.5,0.5);|code-block|syntax|javascript|537231|对于IE的其他版本，有一个复杂的语法。如下所示：|537232|filter:+progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto+expand',
++++M11=1.5320888862379554,+M12=-1.2855752193730787,
++++M21=1.2855752193730796,+M22=1.5320888862379558);|537233|有关更多信息，请查看here。|offset|length|537234|entityMap|0|LINK|mutability|MUTABLE|url|http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/^0|0|0|0|0|A|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

IE9 supports transform:

<pre><code>-ms-transform: scale(0.5,0.5);
</code></pre>

For other versions of IE, there's a complex syntax. Something like this:

<pre><code>filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
 M11=1.5320888862379554, M12=-1.2855752193730787,
 M21=1.2855752193730796, M22=1.5320888862379558);
</code></pre>

Look <a href="http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/" rel="noreferrer">here</a> for more info.

blocks|key|753865|text|不支持，IE8和更早版本不支持标准transform样式。不过，IE9确实支持它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|753866|有一些解决方案你可以尝试使用filter风格，但它们会很混乱。|753867|但是对于您在问题中描述的简单情况(基本上是一个简单的缩小)，您可以使用IE专有的zoom属性。|753868|因为它是非标准的，所以zoom最常见的用法是zoom:1，它用于修复IE的许多布局故障(特别是在IE6和IE7中)。但是它也可以进行实际的缩放，你可以使用zoom:0.5来达到你想要的效果。|753869|使用zoom的好处是，它在IE中的工作方式就像其他任何普通的CSS属性一样(+filter替代方案有一些严重的渲染怪癖，你需要知道)。|753870|使用zoom的唯一缺点是，你需要在IE9或更高版本中禁用它，否则它将与你的transform风格发生冲突，并产生一些不必要的效果。我一般不支持使用CSS+hack，但您可以使用/9+hack+(documented+here)使其只影响IE8和更早的版本，这意味着您可以在同一样式表中同时指定transform和zoom，如下所示：|753871|div+{
++transform:+scale(0.5,0.5);
++zoom:+0.5\9;
}|code-block|syntax|javascript|753872|否则，您将需要使用条件注释来确定是否使用它。|753873|显然，如果您想做任何比简单的比例比例更复杂的事情，那么zoom将不适合，但对于像您问题中的简单情况，它将是完美的。|753874|entityMap|0|LINK|mutability|MUTABLE|url|http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/^0|H|9|0|E|6|0|14|4|0|B|4|M|6|25|8|0|2|4|13|6|0|2|4|11|9|2G|2|42|9|4C|4|2P|F|0|0|0|0|R|4|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1R|8|@$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]|$9|20|A|21|B|C]]|D|@$9|22|A|23|1|24]]|E|$]]|$1|P|3|Q|5|R|7|25|8|@]|D|@]|E|$S|T]]|$1|U|3|V|5|6|7|26|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|27|8|@$9|28|A|29|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|2A|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

No, IE8 and earlier do not support the standard <code>transform</code> style. IE9 does support it though.

There are solutions you could try using the <code>filter</code> style, but they will be messy.

But for the simple case that you're describing in the question (basically a simple scaling down), you could use the IE-proprietary <code>zoom</code> property.

Since it's non-standard, the most common use of <code>zoom</code> is with<code>zoom:1</code>, which is used to fix a number of IE's layout glitches (particlarly in IE6 and IE7). But it does also do actual zooming as well, and you can use <code>zoom:0.5</code> to achieve the effect you're looking for.

The good thing about using <code>zoom</code> is that it is works in IE like any other normal CSS property (the <code>filter</code> alternative has some serious rendering quirks that you need to know about).

The only down-side of using <code>zoom</code> is that you'd need to disable it in IE9 or later, otherwise it'll interract with your <code>transform</code> style and have some unwanted effects. I'm not one to generally support the use of CSS hacks, but you could use the <code>/9</code> hack (<a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/">documented here</a>) to make it only affect IE8 and earlier, meaning you can specify both the <code>transform</code> and the <code>zoom</code> in the same stylesheet, like so:

<pre><code>div {
 transform: scale(0.5,0.5);
 zoom: 0.5\9;
}
</code></pre>

Otherwise you'd need to use conditional comments to determine whether to use it.

Obviously if you want to do anything more complex than a simple proportional scale, then <code>zoom</code> won't be suitable, but for a simple case like the one in your question it will be perfect.

blocks|key|537329|text|试试这个：https://github.com/pbakaus/transformie|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|537330|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/pbakaus/transformie^0|5|12|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Try this:
<a href="https://github.com/pbakaus/transformie" rel="nofollow">https://github.com/pbakaus/transformie</a>

I would like to use the CSS3 property transform:scale.

<pre><code>div
{
 transform: scale(0.5,0.5);
}
</code></pre>

Is there a way to imitate this in Internet Explorer 8 and lower?
May be something with <code>filter</code> or a Javascript solution?

I've searched the web without any result.

Thanks a lot, Vincent

CSS3 transform:scale in IE

我想使用CSS3属性transform:scale。div{     transform: scale(0.5,0.5);}有没有办法在Internet Explorer8及更低版本中模仿这一点？可能是filter或Javascript解决方案？我已经在网上搜索过了，但没有任何结果。非常感谢，文森

问CSS3变换:在IE中缩放
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3变换:在IE中缩放EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3变换:在IE中缩放
EN