IE11 表格内的绝对位置答案

【问题标题】：IE11 absolute position within a tableIE11 表格内的绝对位置
【发布时间】：2018-01-10 10:26:32
【问题描述】：

我找到了类似的线程（此处），但无法找到解决方案。

在我测试过的所有浏览器（Opera、Chrome、Edge、Firefox）中，我所做的一切都有效。在 IE11 中：完全没有。

这是我的 HTML：

<!DOCTYPE html>
<html style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">

<head>
  <script type="text/javascript">
    var img = new Image;
    img.src = "http://2.bp.blogspot.com/-UBq5Nb082x0/Tw7KfsY6EWI/AAAAAAAABwE/Joe2aqsoI0k/s1600/maltese_puppy.jpg";

    function start() {
      var canvas = document.getElementById('imageCanvas');
      if (canvas == null) {
        return;
      }
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      }
    }
  </script>
</head>

<body onload="start();" style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">
  <table cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; width: 100%; height: 100%;">
    <tr>
      <td style="width: 100%; height: 1px;">
        Hi, I'm cute!
      </td>
    </tr>
    <tr>
      <td style="position: relative;">
        <div style="position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: hidden;">
          <canvas id="imageCanvas" oncontextmenu="return false;" style="border: solid 5px red; margin: 0; padding: 0; width: 100%; height: 100%;">
    Your browser does not support the <code>canvas</code> element.
    </canvas>
        </div>
      </td>
    </tr>
  </table>
</body>

</html>

这是一个 jsfiddle：https://jsfiddle.net/krsevs46/

我要求做的就是保持图片完全“填充”（除了我在 WinForms 编程中使用的表达式之外，找不到其他表达式）。

这意味着当您调整浏览器的大小时，不会裁剪任何图片。您应该始终看到整个画面，从爪子到头顶。

我已经读到我所要做的就是交换td 标记上的position: relative;，并将其替换为div 标记和position: relative，但围绕我的另一个div 标记。那失败得很惨。我束手无策（我在另一个线程中的后续问题是为什么画布绘制的这张图片与原始图片相比如此糟糕！但我离题了）。

编辑：进一步阐述我所说的停靠填充图像的意思：

Chrome 正在运行（第一行占用的空间刚好能容纳文本，然后表格的第二行用图像填充所有剩余空间）：

当我调整它所在的窗口时，图像仍然“填充”：

现在，使用 IE，同样的代码，我看不到任何图像。但是如果我使用静态定位（移除相对位置和绝对位置），IE 不会停靠填充图像：

当你缩小窗口时，你不再看到图像的一部分（爪子和下半部分），我想把它挤在那里：

EDIT2：

Vadim 的回答很接近，但是当窗口达到大约 100 像素时，它开始切割而不是填充。这是“最后一英里”，我要花这么长时间！因为我将显示一个缩小到 50-100 像素的图像。

【问题讨论】：

你能澄清一下为什么这里需要绝对定位吗？即使在 IE 中，静态定位也能很好地工作。
我很乐意采取任何解决方案！你有一个简单的例子吗？或者你能再澄清一点吗？
只需从td 中删除position: relative; 和从div 中删除position: absolute 即可使其正常工作。而且还不清楚为什么这里需要绝对定位。
我不确定尝试让它工作的迭代是什么，导致我进行绝对定位（因为我确实在 stackoverflow 上找到了那段代码）......但现在我掉进了这个兔子洞！我在手机上打字，让我跑到电脑上试试你的建议。非常感谢您伸出援手，我很感激。马上回来！
好的，我试过了。它没有达到我想要的效果。我确实详细说明了一点 - 来描述我所说的“停靠 - 填充”的意思。我希望你不要介意。再次感谢您的帮助！（这解释了我是如何开始使用绝对定位的——我一直在寻找码头填充的外观，一些 stackoverflow 的答案让我找到了绝对定位的代码，它在除 IE11 之外的所有浏览器中都非常有效。呸）

标签： css internet-explorer html-table html5-canvas css-position

【解决方案1】：

移除绝对定位，canvas 将按预期显示。您也可以删除多余的包装器并添加box-sizing: border-box。演示：

* {
  /* add this to include borders and padding in width and height */
  box-sizing: border-box;
}

<!DOCTYPE html>
<html style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">

<head>
  <script type="text/javascript">
    var img = new Image;
    img.src = "http://2.bp.blogspot.com/-UBq5Nb082x0/Tw7KfsY6EWI/AAAAAAAABwE/Joe2aqsoI0k/s1600/maltese_puppy.jpg";

    function start() {
      var canvas = document.getElementById('imageCanvas');
      if (canvas == null) {
        return;
      }
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      }
    }
  </script>
</head>

<body onload="start();" style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">
  <table cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; width: 100%; height: 100%;">
    <tr>
      <td style="width: 100%; height: 1px;">
        Hi, I'm cute!
      </td>
    </tr>
    <tr>
      <td>
          <canvas id="imageCanvas" oncontextmenu="return false;" style="border: solid 5px red; margin: 0; padding: 0; width: 100%; height: 100%;">
    Your browser does not support the <code>canvas</code> element.
    </canvas>
      </td>
    </tr>
  </table>
</body>

</html>

【讨论】：

奇数。当我单击运行代码 sn-p 时，根本没有图像显示（在 IE 中）。
@JustLooking 是的，但是当我单击“运行代码 sn-p”两次时它可以工作。很奇怪：）你能在你的作品中测试一下，也许它有效吗？
是的，与我在其他 cmets 中提到的问题相同。一旦缩小，它就会开始切割图像而不是填充它。我在一台 2009 年的笔记本电脑上，使用 win7，并且无法在任何浏览器（firefox、ie11、chrome）上上传 tinypic。我将不得不将它添加到我原来的问题中。
@JustLooking AFAIK（我可能是错的）画布在缩放方面不是很好，有什么理由让你更喜欢画布而不是 SVG？
什么是 SVG？但我使用 Canvas 的原因是，正如我所提到的，这将是波形文件（音频）的波长图像。在表格上方，不会是“我很可爱！”，而是一个音频标签。所以当音频播放时，我在图像上画了一条像素线，显示它们在音频中的位置。所以我使用了画布，这样我就可以在图像上绘制。 SVG 能帮到我吗？ --- 刚刚用谷歌搜索，可扩展的矢量图形。 ... 为什么 IE 不能正常工作！哼哼！大声笑

【解决方案2】：

Canvas 元素内联显示，因此尝试将其显示为块元素：

#imageCanvas {
  border: solid 5px red;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

【讨论】：

我认为这对我没有帮助。或者我做错了什么！

【解决方案3】：

好的，我明白了。我在我的原始帖子中暗示了这一点，关于另一个 div 标签。这是我做的几件小事之一，但我放置这个标签的位置是错误的。

无论如何，我这里有一个新的 jsfiddle：https://jsfiddle.net/d9ywch31/

这是我的原始帖子中的代码，但我稍作修改以使其在 IE 中工作（并且仍然在 Firefox、Chrome、Opera、Edge 中工作）。我添加了 cmets 以详细说明更改：

<!DOCTYPE html>
<html style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">
<head>
  <script type="text/javascript">
    var img = new Image;
    img.src = "http://2.bp.blogspot.com/-UBq5Nb082x0/Tw7KfsY6EWI/AAAAAAAABwE/Joe2aqsoI0k/s1600/maltese_puppy.jpg";
    img.onload = start; ///// change #1 - for IE had to call start from here, instead of body tag onload

    function start() {
      var canvas = document.getElementById('imageCanvas');
      if (canvas == null) {
        return;
      }
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      }
    }
  </script>
</head>
<body style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;"> <!-- change #2 - now start is called in javascript -->
   <table cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; width: 100%; height: 100%;">
      <tr>
         <td style="width: 100%; height: 45px;"> <!-- change #3 - ensure this is set to a fixed value, as the position: abolute top will be set to this -->
         Hi, I'm cute!
         </td>
      </tr>
      <tr>
         <td> <!-- change #4 - no longer need position: relative here -->
            <div style="position: absolute; top: 45px; bottom: 0; right: 0; left: 0; overflow: hidden;"> <!-- change #5 - top set to the height of the first row -->
               <div style="width: 100%; height: 100%; overflow: hidden;"> <!-- change #6 - this is an entirely new div, this was very helpful -->
                  <canvas id="imageCanvas" oncontextmenu="return false;" style="box-sizing: border-box; border: solid 5px red; margin: 0; padding: 0; width: 100%; height: 100%;">
                  Your browser does not support the <code>canvas</code> element.
                  </canvas>
               </div> <!-- change #6 part b - it's closing tag! -->
            </div>
         </td>
      </tr>
   </table>
</body>
</html>

需要注意的一点，我曾经让body onload 方法调用start，但是对于IE，我不得不将其更改为javascript img.onload 方法。在 IE 中，画布会按照我想要的方式完美对齐，但画布是空白的。如果我在 ctx.drawImage 之后放置 img.height 的警报，高度（和宽度）将为 0 - 这解释了为什么画布会是空白的。我猜身体在图像之前加载？此错误仅发生在 IE11 中。无论如何，我对其进行了更改，现在它可以在我测试的所有浏览器中使用。

【讨论】：