文本区域字段，焦点上边框 2px，移动其他 HTML 元素

Question

文本区域字段，焦点上边框 2px，移动其他 HTML 元素

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

这仅适用于文本区域和选择字段，而输入字段则不然。

我已经在 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gan*_*dav 5

它的发生是因为你给了边界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;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，9 月前
查看次数：	2588 次
最近记录：	8 年，4 月前