为啥运行我的 js resizer 代码会使文档在 IE7 - IE11 和 MS Edge 中超过 100% 的窗口高度和宽度？
Posted
技术标签:
【中文标题】为啥运行我的 js resizer 代码会使文档在 IE7 - IE11 和 MS Edge 中超过 100% 的窗口高度和宽度？【英文标题】：Why running my js resizer code makes document to be more than 100% of window height and width in IE7 - IE11 and MS Edge?为什么运行我的 js resizer 代码会使文档在 IE7 - IE11 和 MS Edge 中超过 100% 的窗口高度和宽度？ 【发布时间】：2016-02-19 10:12:30 【问题描述】：脚本的目的是在不使用width 和height CSS 属性的情况下更改一些特殊的div 大小。
<html>
<head>
<title>Test resizer</title>
<script type = 'text/javascript'>
function endsWith(str, suffix)
if (!str)
return false;
return str.toString().indexOf(suffix, str.length - suffix.length) >= 0;
function fixSizeFor(start_elem)
if (document && document.body)
var curr_elem = start_elem ? start_elem : document.body;
var force_size = curr_elem.getAttribute("data-forcesize");
if (force_size && curr_elem.parentNode.style.position.toLowerCase() == "relative" && curr_elem.style.position.toLowerCase() == "absolute")
var needed_width_str = curr_elem.getAttribute("data-neededwidth");
var needed_height_str = curr_elem.getAttribute("data-neededheight");
if (endsWith(needed_width_str, "%"))
var n_w = needed_width_str.substr(0, needed_width_str.length - 1)
var calculated_w = (curr_elem.parentNode.clientWidth * n_w) / 100;
if (curr_elem.style.width != calculated_w + "px")
curr_elem.style.width = calculated_w + "px";
if (endsWith(needed_height_str, "%"))
var n_h = needed_height_str.substr(0, needed_height_str.length - 1)
var calculated_h = (curr_elem.parentNode.clientHeight * n_h) / 100;
if (curr_elem.style.height != calculated_h + "px")
curr_elem.style.height = calculated_h + "px";
for (var i = 0; i < curr_elem.children.length; i++)
fixSizeFor(curr_elem.children[i]);
setInterval(function () fixSizeFor(null); , 100); //comment this and weird space gone
</script>
</head>
<body>
<table border = '1' style = "width: 100%; height: 100%;">
<tr>
<td style = 'position: relative;'>
<div data-forcesize = 'true' data-neededwidth = '100%' data-neededheight = '100%' style = 'position: absolute; top: 0px; left: 0px; overflow: auto; border: dashed;'>Why the hell there is some space under table border?!</div>
</td>
</tr>
</table>
</body>
</html>
奇怪的空间出现在 IE7 - IE11 和 MS Edge 中。 Opera 15 和最新的 Chrome 都可以。
我怎样才能避免这种情况？
【问题讨论】：
你的桌子上有一个边框。所以它是 100% + 2px 高和宽。 @MarcB - 如果我删除边框，什么都不会改变。我设置它们只是为了显示它们的位置。box-sizing: border-box
@SzabolcsPáll - 我该怎么办？我在我的 div 中尝试了所有 3 个可能的值，但没有任何改变。
我的意思是* box-sizing: border-box; 。
【参考方案1】：
好的，将您的 html 更改为此将解决您的“奇怪空间”。您可以通过更改宽度和高度的计算来微调它，或者像我一样只更改 data-neededwidth 和 data-neededheight 属性。
<html>
<head>
<title>Test resizer</title>
<script type = 'text/javascript'>
function endsWith(str, suffix)
if (!str)
return false;
return str.toString().indexOf(suffix, str.length - suffix.length) >= 0;
function fixSizeFor(start_elem)
if (document && document.body)
var curr_elem = start_elem ? start_elem : document.body;
var force_size = curr_elem.getAttribute("data-forcesize");
if (force_size && curr_elem.parentNode.style.position.toLowerCase() == "relative")
var needed_width_str = curr_elem.getAttribute("data-neededwidth");
var needed_height_str = curr_elem.getAttribute("data-neededheight");
if (endsWith(needed_width_str, "%"))
var n_w = needed_width_str.substr(0, needed_width_str.length - 1);
var calculated_w = (window.innerWidth * n_w) / 101;
if (curr_elem.style.width != calculated_w + "px")
curr_elem.style.width = calculated_w + "px";
if (endsWith(needed_height_str, "%"))
var n_h = needed_height_str.substr(0, needed_height_str.length - 1);
var calculated_h = (window.innerHeight * n_h) / 101;
if (curr_elem.style.height != calculated_h + "px")
curr_elem.style.height = calculated_h + "px";
for (var i = 0; i < curr_elem.children.length; i++)
fixSizeFor(curr_elem.children[i]);
setInterval(function () fixSizeFor(null); , 100); //comment this and weird space gone
</script>
</head>
<body>
<table id="table" border = '1' style = "width: 100%; height: 100%;">
<tr>
<td style = 'position: relative;'>
<div data-forcesize = 'true' data-neededwidth = '99%' data-neededheight = '97.5%' style = 'position: relative; top: 0; left: 0; overflow: auto; border: dashed;'>Why the hell there is some space under table border?!</div>
</td>
</tr>
</table>
</body>
</html>
【讨论】：
感谢您的努力，但这并不准确。如果我删除边框并将background-color 添加到div，并将页面大小调整到一半左右，则可以清楚地看到table 的大小大于窗口并且两个滚动条都会出现，而应该没有。不仅如此，我需要一个通用的解决方案，而不是针对这种情况的 hacky 解决方案。我有很多其他这样的地方，需要不同的大小，并且可以无限量，因为它们都是动态的。
你可以通过改变宽度和高度的计算来微调这个，或者像我一样改变你的 data-neededwidth 和 data-neededheight 属性。【参考方案2】：
有时在使用 IE 时，您必须具体说明您的身高，因为它在计算高度时非常严格。
这个呢：
http://codepen.io/jonathan/pen/qOzbMa/
我在 CSS 中添加了 html 和 body 标签 height: 100%。这允许其在 DOM 中的后代（子代）将其 height 扩展到其父代的底部。
html, body
height:100%; /* important to allow children to inherit */
我从td 中删除了position relative，因为tables 和position relative 在IE 中存在问题。最好将另一个 div 标签嵌套为绝对位置 div 的父级。
<table border="1" style="width: 100%; height: 100%;">
<tr>
<td>
<!--
height 100% on both relative and absolute positioned
elements to extend their height to bottom of their parent.
that is why the html and body tag have their height 100%
which allows its children to inherit the height 100%
-->
<div style='position: relative; height: 100%;'>
<div style='width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: auto; border: dashed;' data-forcesize='true' data-neededwidth='100%' data-neededheight='100%'>Why the hell there is some space under table border?!</div>
</div>
</td>
</tr>
</table>
我还使用position: relative 将height:100% 添加到div，因此它将其高度扩展到其父级的底部。我还使用position: absolute 将width:100% 和height:100% 添加到您的div，因此div 将其高度扩展到其父级的底部。
IE 中的表格高度有问题，特别是如果您在td（表格数据单元格）上使用相对位置，因为它的display 属性设置为table-cell。与div 标签的默认display 属性不同，即block。
【讨论】：
感谢您的回答。可悲的是，这个中继在width 和 height CSS 属性上。您向我展示了我之前的解决方案，该解决方案迫使我编写您在答案中看到的垃圾 JS。在某些情况下，双 div 解决方案在 IE8 中不起作用。内部 div 根本不会对高度 100% 做出反应，并且所有内容都保持不可见。我将进行更多测试并向您展示这一点。我现在不能这样做，因为已经迁移到垃圾 JS 代码解决方案。
@Kosmos 我不确定为什么不能使用宽度和高度 CSS 属性？ .. 因为浏览器页面使用 CSS 呈现。您还可以通过 JS 调整器脚本使用和设置 CSS。您是否有理由不想使用 CSS 宽度和高度，只是好奇？ ..我期待看到您的测试示例！谢谢
我的脚本设置 px 值无论如何都应该起作用，而标签中设置的 % 值在某些情况下不起作用。看看这个pastebin.com/CwTKgcV7 例子。我把它从我的项目中撕下来并为你设置了搜索点。 search point 1 和 search point 2。那个双 div 看起来就像水平线。以上是关于为啥运行我的 js resizer 代码会使文档在 IE7 - IE11 和 MS Edge 中超过 100% 的窗口高度和宽度？的主要内容，如果未能解决你的问题，请参考以下文章