问题
VW units are displaying strangely for me in IE9. For instance, a value of 10vw is enormous, taking up ~10 times the viewport width instead of a tenth. Setting the value to 0.1vw yields results closer to what is expected. What is strange is that I can find almost nothing on this issue, but I would have thought that if this is a real issue or incompatibility it would have been widely documented (and griped about). I'm using IE9 in a VM, so I don't know if that's the issue or not.
This is a jsfiddle I found that provides a simple case:
http://jsfiddle.net/dtvz5mty/
CSS:
#thisscales{
font-size:10vw;
width:40vw;
}
HTML:
<div id="thisscales">hai there!</div>
Has anyone dealt with this before? Is this a real issue? If so, what is a good work around? I'd like to get font-sizes and the positions of text elements to scale with the viewport (I'm doing animations and the positioning of the elements must be proportional).
回答1:
So apparently not including this in the HTML was the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(╯°□°）╯︵ ┻━┻
Adding it worked a charm. I will never be lazy and not include it again.
回答2:
This has been a well-known bug in IE 9 and 10.
This webpage here describes a good way to fix it: Here
And the Github Project for the fix is located: Here
回答3:
Make sure you put <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head> section of your html file. So now vw (viewport-width) will equals the device-width in whatever the browser you use (those which supports vw).
来源：https://stackoverflow.com/questions/30985386/vw-not-working-correctly-in-ie9