分析问题

对于这个问题，有几种可选的解决办法：

1. 去除窗体控件的圆角边框，毕竟操作系统的窗体都是直角的，这个应该也无可厚非（只不过这个改动和之前不一致，肯定会勾起部分用户的不满情绪）

2. 给内部节点元素也加上圆角边框，防止内部节点的覆盖父节点的圆角边框

第二个方式倒是可行的方案，在浏览器调试工具中尝试如下：

由于外层节点 .f-panel 拥有 CSS 样式类 f-corner-all：

.f-corner-all {    border-radius: 6px;}

这里给内部的 .f-panel-header 增加一个样式类 f-corner-top：

.f-corner-top {    border-top-right-radius: 6px;    border-top-left-radius: 6px;}

似乎已经完美解决这个问题了。

其实不然，由于窗体内部的结构比较复杂，比如存在底部工具栏的情况（底部工具栏又可能有多个）：

因此，判断哪个元素位于最下面，是正文元素，还是某个工具栏控件，就是一个麻烦事。

并且还存在用户动态显示隐藏工具栏的情况，这就更增加了复杂度。

所以这个问题我迟迟没有动手修改。

直到有一天，我突然发现，同是 Cupertino 主题，下拉菜单的圆角边框是正常的，不信你来看（单田芳说）：

解决问题

我似乎看到了问题解决的希望，同一个主题，有个地方正常，有的地方不正常，是是否比较两者的差异了！

经过仔细对比，问题逐步浮出水面，却原来下拉菜单有这么个CSS属性：

.f-menu {    overflow: auto;}

而窗体控件没有定义 overflow 属性，我们看下浏览器缺省的 overflow 属性：

原来，如果未定义 overflow 属性，那么节点的这个属性默认值是 visible（有点出乎意料，我还以为是 auto 呢）。

现在好了，既然比较出差异，应用这个改变即可（为了便于观察，我们把 border-radius 改为 12px）：

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。