【发布时间】：2020-12-29 09:46:44
【问题描述】：
我想我在 Safari 中发现了一个错误，想知道我是否正确。错误如下：
在 Safari 中，如果 <td> 中有 <textarea>，其中 <td> 具有定义的像素高度，<textarea> 具有 height: 100%;，则 <textarea&> 的高度将是正常高度（根据您使用的是边框框还是内容框大小略有不同）减去顶部和底部边框以及 <textarea> 的填充。
这意味着在 Safari 中，<textarea> 在使用box-sizing: border-box; 时不会拉伸到<td> 的完整高度（就像在所有其他浏览器中一样）。
这里有一些代码来演示：
* {
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 <textarea> Within <td></title>
<script>
</script>
</head>
<body>
<h3>Bug Demo: Safari <textarea> Within <td></h3>
<table>
<tr>
<td class="blue">
<textarea id="textarea1"></textarea>
</td>
<td class="paddingleft">
<b><textarea> with box-sizing:border-box;</b><br /><br /> The <textarea> to the left should be exactly 200px in height.<br /><br /> You should not be able to see the blue background behind the <textarea>.
<div class="messagediv margintop" id="messagediv1"></div>
</td>
</tr>
</table>
<script>
document.getElementById("messagediv1").innerHTML = "Height of <textarea> #1 using JavaScript: " + document.getElementById("textarea1").offsetHeight + "px";
</script>
<table class="margintop">
<tr>
<td class="blue">
<textarea class="contentbox" id="textarea2"></textarea>
</td>
<td class="paddingleft">
<b><textarea> with box-sizing:content-box;</b><br /><br /> The <textarea> 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 <textarea>.
<div class="messagediv margintop" id="messagediv2"></div>
</td>
</tr>
</table>
<script>
document.getElementById("messagediv2").innerHTML = "Height of <textarea> #2 using JavaScript: " + document.getElementById("textarea2").offsetHeight + "px";
</script>
</body>
</html>【问题讨论】：
-
这能回答你的问题吗？ Make textarea fill table cell
-
@MaxiGui 我已经知道对此的修复，我只是想知道这是否是 Safari 中的错误。只需将我找不到主题了，但这是一个至少 15 岁的错误。他们可能知道这一点，但从开发人员能够找到解决它的那一刻起。他们真的不在乎。
标签： css safari textarea tablecell