cross-browser - 使用 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;
 }

输入字段和文本区域都有“表单字段”类。（在 Safari、Chrome 和 Firefox 中的行为相同）

Answer 1

就像 TJ 指出的那样，在您的 DOM 树中较高的位置有红色背景。将边框半径添加到角落会暴露这一点。使用浏览器的检查器找到它。应该是快速修复。