我在页面中使用CSS vw
属性来提供<div>
50%的页面宽度(这只是一个示例)。这是代码:
*
{
/* 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中看起来是正确的:
在IE9中不正确:
我的问题是:有没有人知道这方面的解决方法?
这是导致问题的设置(Windows 7):
答案 0 :(得分:0)
请参阅下面的修改。
我提出了一个模糊的清洁解决方案。幸运的是,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>