查看时IE和Chrome中的css/jquery大小和绝对定位问题->；缩放！=100%
我有一个奇怪的问题，绝对定位和大小元素，以适应周围的div。 我在现有页面上设置了一些div的位置和大小（它是给我的）。我想从左边和底部用两个div来装饰它，这样它们就可以“拥抱”它，形成一个“L”形。我需要动态地这样做，因为div的大小和位置在web页面的正常使用过程中会发生变化 为了实现我的目标，我首先使用jquery的.offset（）获取div的偏移量，并使用.outerWidth/Height获取维度。然后，我计算div的限制（顶部、底部、左侧），并使用该限制来调整和绝对定位我的两个div，这两个div是0.5不透明的，具有高z索引（请参见示例代码）。我使用jquery的.width和.height设置div的大小，使用带有“top”和“left”属性的.css设置位置。我尝试使用.offset设置定位，但似乎效果不好（在所有浏览器中都遇到了重叠和/或不需要的空格） 无论“查看->缩放”设置是什么，该设置都适用于FF（在3.6上测试）。但是，在IE8（IE8标准模式）和chrome（在版本6上测试）上，只要“查看->缩放”设置为100%，这将非常有效。如果设置为更高（例如IE中的125%），则对于装饰分区（示例代码中的红色分区b）高度的某些值，顶部和底部分区（我的演示代码中的c和a）之间的间距将为0.5px。当“缩放”设置为小于100%（在IE中为75%）时，装饰div高度的某些值将出现两个div的重叠 我在jsbin.com中创建了一个示例页面来演示这个问题。 在IE上运行此示例时，将view->zoom设置为125%，红色div的默认大小应显示问题。尝试使用“向上”和“向下”按钮来更改div的高度，并查看情况。您也可以在文本框中键入一个数字，然后单击“go”按钮跳转到特定高度 我真的希望有人能找到一个解决办法，因为我在这里尝试了各种不同的东西，已经用我的头撞了很久了 更新： 下面是Strelok的回答，我忘了声明我必须在BODY标签中绝对定位“拥抱”div，这样我才能确保它们始终覆盖页面的其余部分。我不能指望它们与red DIV在同一个容器中，也不能改变它们的基本定位属性（position:aboslute，作为BODY的子对象，以及zindex） 更新： 下面的hradac给出了一个解决IE默认缩放模式问题的答案。这对我来说已经足够构成一个答案了，但是如果其他人有其他的想法，可以用一般的方式解决这个问题，我很乐意听到 我创建了示例代码，作为我遇到的问题的一个非常简单的演示。我很抱歉一开始没有把这一点讲清楚 下面是我的index.html文件的代码，其中包含所有的JS，适用于那些不想进入jsbin的人，或者如果由于某种原因无法使用jsbin。您只需复制粘贴并将其另存为index.html即可运行查看时IE和Chrome中的css/jquery大小和绝对定位问题->；缩放！=100%,jquery,css,positioning,Jquery,Css,Positioning,我有一个奇怪的问题，绝对定位和大小元素，以适应周围的div。 我在现有页面上设置了一些div的位置和大小（它是给我的）。我想从左边和底部用两个div来装饰它，这样它们就可以“拥抱”它，形成一个“L”形。我需要动态地这样做，因为div的大小和位置在web页面的正常使用过程中会发生变化 为了实现我的目标，我首先使用jquery的.offset（）获取div的偏移量，并使用.outerWidth/Height获取维度。然后，我计算div的限制（顶部、底部、左侧），并使用该限制来调整和绝对定位我的两个d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
$（函数（）{
变量a=$（''）；
var c=$（''）；
$（“正文”）。附加（a）；
$（'body'）。追加（c）；
变量b=$（'somediv'）；
函数绘图（）{
var docWidth=$（document）.width（）；
var bLims={
顶部：数学楼层（b.偏移（）.顶部），
左：数学楼层（b.偏移（）.左），
底部：Math.ceil（b.offset（）.top+b.outerHeight（））
}
a、 show（）；
c、 show（）；
a、 css({
顶部：bLims.bottom+'px'，
左：0+'px'
}).宽度（docWidth）.高度（bLims.底部bLims.顶部）；
c、 css({
top:bLims.top+'px'，
左：0+'px'
}).宽度（bLims.左侧）.高度（bLims.底部bLims.顶部）；
}
a、 css({
位置：'绝对'，
不透明度：0.5，
zIndex:9000，
背景颜色：“#555”
}).css({
显示：“块”
});
c、 css({
位置：'绝对'，
不透明度：0.5，
zIndex:9000，
背景颜色：“#555”
}).css({
显示：“块”
});
draw（）；
$（'#go'）。单击（函数（）{
b、 高度（$（'#height'）.val（）+'px'）；
draw（）；
})
$（'#向上'）。单击（函数（）{
b、 高度（b.高度（）+1+'px'）；
$（'#height'）.val（b.height（））；
draw（）；
})
$（'#down'）。单击（函数（）{
b、 高度（b.高度（）-1+'px'）；
$（'#height'）.val（b.height（））；
draw（）；
})
});
古普敦
查看此版本
我用了一个包装袋来定位你的红色袋和“拥抱”袋。在
大多数缩放级别中，它看起来都很完美，包括125%的Chrome（我还没有测试IE8，因为我这里没有它）。Chrome放大207%时出现1像素错误。我会责怪浏览器实现的缩放机制在其他缩放级别上增加了额外的像素间距：（查看修改后的代码后，这似乎是一个亚像素渲染问题。问题是，尽管计算机能够计算分数，但我们可以
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var a= $('<div/>');
var c= $('<div/>');
$('body').append(a);
$('body').append(c);
var b=$('#somediv');
function draw(){
var docWidth=$(document).width();
var bLims={
top:Math.floor(b.offset().top),
left:Math.floor(b.offset().left),
bottom:Math.ceil(b.offset().top + b.outerHeight())
}
a.show();
c.show();
a.css({
top: bLims.bottom+'px',
left: 0+'px'
}).width(docWidth).height(bLims.bottom-bLims.top);
c.css({
top: bLims.top+'px',
left: 0+'px'
}).width(bLims.left).height(bLims.bottom-bLims.top);
}
a.css({
position: 'absolute',
opacity: 0.5,
zIndex: 9000,
backgroundColor:'#555'
}).css({
display: 'block'
});
c.css({
position: 'absolute',
opacity: 0.5,
zIndex: 9000,
backgroundColor:'#555'
}).css({
display: 'block'
});
draw();
$('#go').click(function(){
b.height($('#height').val()+'px');
draw();
})
$('#up').click(function(){
b.height(b.height()+1+'px');
$('#height').val(b.height());
draw();
})
$('#down').click(function(){
b.height(b.height()-1+'px');
$('#height').val(b.height());
draw();
})
});
</script>
</head>
<body>
<input type="textbox" style="width:10em" id="height"></input><button id="go">go</button><button id="up">up</button><button id="down">down</button>
<div id="somediv" style="position:relative;top:200px;left:200px;height:106px;width:73px;background-color:#FF0000"></div>
</body>