问题描述
我想我已经在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;
}
解决方法
我补充说,这是一种修复此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 <textarea> #1 using JavaScript: " + document.getElementById("textarea1").offsetHeight + "px";
document.getElementById("messagediv2").innerHTML = "Height of <textarea> #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 <textarea> Within <td></title>
<script>
</script>
</head>
<body>
<h3>Bug Demo: Safari <textarea> Within <td></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><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>
<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>
</body>
</html>