Isolated test case(在IE 7模式下以IE 7或IE 8/9查看) 在IE 7中查看此页面会导致我的宽度值被忽略.如果删除填充值,则正确应用宽度,但是当您添加填充时,它会导致整
... . . Isolated test case(在IE 7模式下以IE 7或IE 8/9查看)
在IE 7中查看此页面会导致我的宽度值被忽略.如果删除填充值,则正确应用宽度,但是当您添加填充时,它会导致整个页面增长,并且它几乎将填充视为边距.页面宽度越大,元素右侧的空白区域越大.我一直无法找到这是哪个错误,更重要的是,如何修复它.有谁见过这个,有没有人知道解决方案?
到目前为止我尝试过的事情:
>缩放修复
> display:inline-block(推荐用于双垂直填充问题)
>它不是行高(这是宽度问题……)
问题的屏幕截图:
这个div应该跨越页面的整个宽度,而不是更多,但你会注意到这里的滚动条:
滚动到右边的结果:
这不应该存在.
检查浏览器工具中的元素会将宽度显示为页面的整个宽度,而不是整个宽度减去填充.
.解决方法
. 免责声明:我会忽略功能要求和您对其他答案的评论,只关注具体问题.
该IE7特定问题是由在相对定位的元件上使用偏移(例如,顶部,右侧,底部或左侧)引起的.如果偏移相对定位的元素,那么它基本上仍将保留其原始位置的整个空间.请注意,在抵消绝对定位的元素时不会发生这种情况.
在应用左偏移之前,相对定位的元素是由于其宽度而右边的填充完全在视口之外,因此将生成水平的scollbar.在相对定位的元素上应用左偏移后,您基本上会在偏移的另一侧留下与偏移相同大小的空间,仍然在视口之外.
在重绘期间,有点理智的web浏览器会发现视口外部没有任何可见内容,因此会再次隐藏滚动条.然而,IE7并不够智能并且保留了滚动条.
毕竟,使用左偏移在技术上是错误的解决方案.你应该在第一时间使用margin-left而不是left.与偏移不同,边距不会在原始位置留下空白空间,而是将整个元素推到所需位置.
那么,这是你的脚本修复方式:
$('#el').css({ 'width': document.body.scrollWidth - 200,'padding-right': 200,'margin-left': (-1 * (document.body.scrollWidth - 322) / 2) - 1});
顺便说一句,我想知道那个浮动:左;在这个构造中有意义,你显然想要模拟100%的宽度.它可能是用于具体例子中不可见的其他目的.
. . .. ...