Question

我想我已经在Safari中发现了一个错误，并且想知道我是否正确。该错误如下：

在Safari中，如果<textarea>中有一个<td>，其中<td>具有定义的像素高度，而<textarea>具有height: 100%;，则{ {1}}的高度将是正常高度（根据您使用的是边框框还是内容框大小而略有不同）减去<textarea&>的顶部和底部边框以及边距。

这意味着在Safari中，使用<textarea>时<textarea>不会伸展到<td>的整个高度（就像在所有其他浏览器中一样）。

下面是一些代码来演示：

box-sizing: border-box;

* {
  box-sizing: border-box;
}

body {
  font-size: 12px;
}

.contentbox {
  box-sizing: content-box;
}

table {
  margin: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}

td {
  width: 150px;
  height: 200px;
  padding: 0px;
  margin: 0px;
}

.messagediv {
  color: purple;
}

.paddingleft {
  padding-left: 15px;
}

.blue {
  background-color: blue;
}

textarea {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0px;
  resize: none;
  min-height: 0px;
}

.margintop {
  margin-top: 10px;
}

Answer 1

我补充说，这是一种修复此CSS的方法，可以直接设置样式，以使其更易于阅读。这是已知的错误：Make textarea fill table cell

信用给stefa.rossi

<td class="blue" style="position: relative;">
    <textarea id="textarea1" style="position:absolute; top: 0;
left: 0;
right: 0;
bottom: 0;"></textarea>
</td>

document.getElementById("messagediv1").innerHTML = "Height of &lt;textarea&gt; #1 using JavaScript: " + document.getElementById("textarea1").offsetHeight + "px";
document.getElementById("messagediv2").innerHTML = "Height of &lt;textarea&gt; #2 using JavaScript: " + document.getElementById("textarea2").offsetHeight + "px";

* {
  box-sizing: border-box;
}

body {
  font-size: 12px;
}

.contentbox {
  box-sizing: content-box;
}

table {
  margin: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}

td {
  width: 150px;
  height: 200px;
  padding: 0px;
  margin: 0px;
}

.messagediv {
  color: purple;
}

.paddingleft {
  padding-left: 15px;
}

.blue {
  background-color: blue;
}

textarea {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0px;
  resize: none;
  min-height: 0px;
}

.margintop {
  margin-top: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us">
  <title>Bug Demo: Safari &lt;textarea&gt; Within &lt;td&gt;</title>
  <script>
  </script>
</head>

<body>
  <h3>Bug Demo: Safari &lt;textarea&gt; Within &lt;td&gt;</h3>
  <table>
    <tr>
      <td class="blue" style="position: relative;">
        <textarea id="textarea1" style="position:absolute; top: 0;
left: 0;
right: 0;
bottom: 0;"></textarea>
      </td>
      <td class="paddingleft">
        <b>&lt;textarea&gt; with box-sizing:border-box;</b><br /><br /> The &lt;textarea&gt; to the left should be exactly 200px in height.<br /><br /> You should not be able to see the blue background behind the &lt;textarea&gt;.
        <div class="messagediv margintop" id="messagediv1"></div>
      </td>
    </tr>
  </table>
  <table class="margintop">
    <tr>
      <td class="blue">
        <textarea class="contentbox" id="textarea2"></textarea>
      </td>
      <td class="paddingleft">
        <b>&lt;textarea&gt; with box-sizing:content-box;</b><br /><br /> The &lt;textarea&gt; to the left should be slightly larger than 200px in height.<br /><br /> You should not be able to see the blue background behind the &lt;textarea&gt;.
        <div class="messagediv margintop" id="messagediv2"></div>
      </td>
    </tr>
  </table>
</body>

</html>

Safari Bug-高度固定的表格单元格内textarea高度为100％

1 个答案: