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 上设置了边界。边框应该已经是透明颜色了,在 hoverfocus 上只需提供边框颜色。

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 属性 用于告诉浏览器尺寸属性(宽度和高度)应该包括什么。 编码愉快!