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;
 }

输入框和文本框都有“form-field”类。 (在 Safari、Chrome 和 Firefox 中的行为相同)

Answer 1

像 T.J.请注意，在您的 DOM 树中较高位置的某些内容具有红色背景。将边界半径添加到你的 Angular 落就是暴露它。使用浏览器的检查器找到它。应该是一个快速修复。