3.2.28: 修后台设置页第一个配置项后面的大块空白(.section 建独立 BFC,不再被左侧浮动标签列的 clear:both 拉长到标签列等高;真实渲染实测 405px→93px)
This commit is contained in:
@@ -459,15 +459,34 @@
|
||||
}
|
||||
|
||||
/* 2. 区块间距与分隔:原来 10px 的内边距太挤,项与项之间没有分界。
|
||||
* 3.2.26 调整:16/8 → 14/12,并清掉 h4 标题的 WP 默认 margin(见下) */
|
||||
* 3.2.26 调整:16/8 → 14/12,并清掉 h4 标题的 WP 默认 margin(见下)
|
||||
*
|
||||
* 3.2.28:这里补上了 `display: flow-root` —— 本次真正的根因修复。
|
||||
*
|
||||
* 3.2.24 把标签列改成 float:left(宽 190px;标签多了以后整列约 400px 高),
|
||||
* 而框架原本给 .section 留了 ::after{clear:both} 来清除内部浮动的
|
||||
* .controls / .explain。问题在于 clear 的作用范围以**最近的 BFC** 为界:
|
||||
* .section 只是普通块盒、不建 BFC,于是它末尾那个清除元素被要求避开
|
||||
* **左侧整个浮动标签列**,把第一个配置项的下边界一直撑到标签列底部
|
||||
* (实测 section 高 405px,而内容只占 43px)。
|
||||
*
|
||||
* 这也解释了 3.2.26 只收编 h4 的 margin 为什么完全无效 —— 多出来的不是
|
||||
* 间距,是 section 自身的高度;空白也只出现在第一个配置项之后,因为后面
|
||||
* 的 section 起点已经越过标签列底部,clear 不再起作用。
|
||||
*
|
||||
* 修法:让 .section 建立自己的 BFC,内部的清除就只在自身范围内生效。
|
||||
* 不能用 overflow:hidden —— 那会把颜色选择器的弹出层裁掉。
|
||||
* 原有的 ::after{clear:both}(见上面 .section:after)保留,
|
||||
* 作为极老浏览器不支持 flow-root 时的兜底。 */
|
||||
#optionsframework .section {
|
||||
display: flow-root;
|
||||
padding: 14px 18px 12px;
|
||||
border-bottom: 1px solid #f6f7f7;
|
||||
}
|
||||
|
||||
/* 3.2.26:配置项标题(h4.heading)继承 WP 后台 common.css 的
|
||||
* 上下 margin ≈17px,与 section 的 padding 叠加后,相邻两个配置项
|
||||
* 之间出现约 42px 的空白(8+16+17.3)。标题的内距统一由本条控制:
|
||||
* 之间多出约 34px 的空隙(上下各 17px)。标题的内距统一由本条控制:
|
||||
* 上边距清零(section 的 padding-top 负责),下边距 10px 压住控件。 */
|
||||
#optionsframework .section > .heading {
|
||||
margin: 0 0 10px;
|
||||
|
||||
Reference in New Issue
Block a user