使用CSS边框半径的奇怪行为

Question

有人可以解释为什么以这种方式显示左上角和左下角：

使用以下CSS：

form .form-field
 {
    height: 20px;
    padding: 5px;
    border: 1px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
 }

输入字段和textarea都有“表单字段”类。 （Safari，Chrome和Firefox中的行为相同）

Answer 1

像T.J.注意到，有一些红色背景，在你的DOM树中更高。将边框半径添加到角落会暴露出来。使用浏览器的检查器查找它。应该是一个快速修复。