Question

问题：我已经创建了一个简单的测试页面（下面）来演示问题所在。当您使用 border = 2px 在textarea字段上设置CSS时，textarea将自行调整大小因此，textarea下面的所有字段/内容都将向下移动。

这仅适用于textarea和select字段，而输入字段不以这种方式运行。

我在IE，Opera和FF中对此进行了测试，但没有一个产生相同的行为，当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>

Answer 1

这种情况正在发生，因为你在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; }上只提供边框颜色。

$('a.light-box').on('click', function(e){
   e.preventDefault();
});

Answer 2

在textarea css中使用css box-sizing：border-box; 属性。见例子：

textarea { 
        box-sizing: border-box;
}

Answer 3

我检查了你的代码。实际上，Chrome会添加除宽度和高度之外的边框。

您可以使用“box-sizing”属性来检查。

box-sizing属性用于告诉浏览器调整属性（宽度和高度）应包含的内容。快乐的编码！

Textarea字段，焦点上的边界2px，移动其他HTML元素

3 个答案: