Textarea 字段,焦点上的边框 2px,移动其他 HTML 个元素
Textarea field, border 2px on focus, moves other HTML elements
问题:
我创建了一个简单的测试页面(如下)来演示问题所在。
当您使用 border = 2px 在 textarea 字段上设置 CSS 时,textarea 将自行调整大小
因此,textarea 下面的所有 fields/content 都将向下移动。
这仅适用于文本区域和 select 字段,而输入字段不会以这种方式运行。
我已经在 IE、Opera 和 FF 中对此进行了测试,其中 none 产生了相同的行为,
它们都按应有的方式工作,而 Chrome 将所有元素移动到它们下面。
有谁知道 CSS 可以防止这种情况发生的修复方法吗?
示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style language="text/css">
textarea:focus {
border: 2px solid #000000;
}
textarea {
width: 300px;
height: 100px;
resize: none;
outline: none;
}
</style>
</head>
<body>
<form>
<textarea name="test" cols="0" rows="0"></textarea>
<br />
This text and button will move a few pixels down when you click in textarea field.
<br/>
<input type="submit" name="submit" value="submit"/>
</form>
</body>
</html>
在文本区域 css 中使用 css box-sizing: border-box; 属性。参见示例:
textarea {
box-sizing: border-box;
}
发生这种情况是因为您在 hover
上设置了边界。边框应该已经是透明颜色了,在 hover
或 focus
上只需提供边框颜色。
textarea:focus {
border-color:#000000;
}
textarea {
width: 300px;
height: 100px;
resize: none;
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid transparent;
}
我检查了你的代码。实际上Chrome添加不包含宽度和高度的边框。
您可以使用 "box-sizing" 属性.
进行检查
box-sizing 属性 用于告诉浏览器尺寸属性(宽度和高度)应该包括什么。
编码愉快!
问题: 我创建了一个简单的测试页面(如下)来演示问题所在。 当您使用 border = 2px 在 textarea 字段上设置 CSS 时,textarea 将自行调整大小 因此,textarea 下面的所有 fields/content 都将向下移动。
这仅适用于文本区域和 select 字段,而输入字段不会以这种方式运行。
我已经在 IE、Opera 和 FF 中对此进行了测试,其中 none 产生了相同的行为, 它们都按应有的方式工作,而 Chrome 将所有元素移动到它们下面。
有谁知道 CSS 可以防止这种情况发生的修复方法吗?
示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style language="text/css">
textarea:focus {
border: 2px solid #000000;
}
textarea {
width: 300px;
height: 100px;
resize: none;
outline: none;
}
</style>
</head>
<body>
<form>
<textarea name="test" cols="0" rows="0"></textarea>
<br />
This text and button will move a few pixels down when you click in textarea field.
<br/>
<input type="submit" name="submit" value="submit"/>
</form>
</body>
</html>
在文本区域 css 中使用 css box-sizing: border-box; 属性。参见示例:
textarea {
box-sizing: border-box;
}
发生这种情况是因为您在 hover
上设置了边界。边框应该已经是透明颜色了,在 hover
或 focus
上只需提供边框颜色。
textarea:focus {
border-color:#000000;
}
textarea {
width: 300px;
height: 100px;
resize: none;
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid transparent;
}
我检查了你的代码。实际上Chrome添加不包含宽度和高度的边框。
您可以使用 "box-sizing" 属性.
进行检查box-sizing 属性 用于告诉浏览器尺寸属性(宽度和高度)应该包括什么。 编码愉快!