修改

Question

我在页面中使用CSS vw属性来提供<div> 50％的页面宽度（这只是一个示例）。这是代码：

＆＃13;

*
{
	/* Zero padding/margin by default. */
	margin: 0;
	padding: 0;
	/* Fix CSS. */
	box-sizing: border-box;
}

#left
{
	left: 0;
	width: 50vw; /* SHOULD BE 50% WIDTH! */
	margin: auto;
	padding: 0;
	top: 50px;
	bottom: 50px;
	position: absolute;
	background: #f00;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
	<center>|</center>
	<div id="left"></div>
</body>
</html>

＆＃13;

有一个红色框应占据页面的左半部分（由|指示的中途）。它通常工作正常，但是当您将Windows上的桌面缩放设置为125％（默认为100％）时，它在IE9中不起作用。桌面扩展为125％，在Firefox中看起来是正确的：

firefox

在IE9中不正确：

ie9

我的问题是：有没有人知道这方面的解决方法？

这是导致问题的设置（Windows 7）：

stupid_windows

Answer 1

请参阅下面的修改。

我提出了一个模糊的清洁解决方案。幸运的是，Windows仅支持一些桌面扩展值：Windows 7中的100％，125％，150％，Windows 8中的200％（或8.1？我不记得了）。更幸运的是，它通过CSS媒体查询报告正确的相对于96 DPI。总而言之，这意味着你可以做到这一点：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	
	<style>
	*
	{
		/* Zero padding/margin by default. */
		margin: 0;
		padding: 0;
		/* Fix CSS. */
		box-sizing: border-box;
	}

	#left
	{
		left: 0;
		width: 50vw;
		margin: auto;
		padding: 0;
		top: 50px;
		bottom: 50px;
		position: absolute;
		background: #f00;
	}
	</style>
<!--[if IE]>
	<style>
	/* Windows 125% scale. */
	@media (resolution: 120dpi) { 
		#left {
			width: 40vw; /* 50 / 1.25 */
		}
	}

	/* Windows 150% scale. */
	@media (resolution: 144dpi) { 
		#left {
			width: 33.333vw; /* 50 / 1.5 */
		}
	}

	/* Windows 200% scale. */
	@media (resolution: 192dpi) { 
		#left {
			width: 25vw; /* 50 / 2 */
		}
	}
	</style>
<![endif]-->
</head>
<body>
	<center>|</center>
	<div id="left"></div>
</body>
</html>

非常hacky，但不是太糟糕，它完美无缺。这确实意味着您必须计算所有vw和vh值的倍数。

修改

如评论中所述，它可以正常工作，除非使用鼠标滚轮进行缩放以及桌面缩放。坦率地说，IE9很糟糕。我最终使用这个javascript仍然无法正常工作：

<script>
function endsWith(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
for (var i = 0; i < document.styleSheets.length; ++i) {
    var factor = screen.systemXDPI / screen.logicalXDPI;

    var rules = document.styleSheets[i].cssRules;
    for (var j = 0; j < rules.length; ++j) {
        var style = rules[j].style;
        for (var k = 0; k < style.length; ++k) {
            // This is weird I know.

            // Change style names from 'max-height' to 'maxHeight'.
            styleName = style[k].replace(/\-(\w)/g, function(str, letter) {
                return letter.toUpperCase();
            });

            if (style[styleName] != undefined) {
                // Replace vw and vh's.
                newVal = style[styleName].replace(/([.0-9]+)(v[wh])/g, function(str, num, unit) {
                    return (parseFloat(num) / factor) + unit;
                });
                if (style[styleName] != newVal) {
                    style[styleName] = newVal;
                }
            }
        }
    }
}
</script>

在IE9中使用桌面扩展的CSS vw bug的解决方法

1 个答案:

修改