css - ColdFusion ext-all.css 搞乱了页面格式

Question

我有一个母版页类型的设置，其中加载母版页并单击不同的选项卡在页面中加载不同的子页面。当直接在浏览器中加载时，我的一个页面运行良好，但当在母版页中加载时，格式困惑 - 所有标题都被压缩/压扁，间距关闭......我追踪到以下正在应用的 css来自 CF 的 ext-all.css 文件(母版页中有一个 cfajaximport 标记，似乎导致它被包含在内):

html, body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
    margin: 0;    
    padding: 0; 
}

为什么这包含在 ext-all.css 中(它似乎弄乱了标题、表格等的大多数默认填充/间距)？除了 a) 篡改 ext-all.css 和 b) 覆盖单个文件中这些标签的边距和填充 css 之外，我该如何解决这个问题？

Answer 1

对我来说，一种快速实用的方法就是覆盖特定的 css 定义。一个较旧的元素使用 cfmap，在不重写代码的情况下，我只是在我的案例中这样做:

.x-border-box, .x-border-box * {
    box-sizing: content-box !Important;
    -webkit-box-sizing: content-box !Important;
}

.x-body{
    font-family:lato,​Helvetica,​"Arimo",​sans-serif;
    font-size:15px;
    color:#444; 
}

页面再次正确呈现。根据您使用的 ui 标签，覆盖 ext-css 定义。

因为脚本/样式被添加到 HEAD 之前(在您自己的样式之前)，您不能使用“继承”，但必须显式设置 css 属性(就像我对字体系列、大小和颜色所做的那样)在我的情况下，盒子大小)。

但尽量避免按照建议使用这些标签。您没有完全控制权，它会扰乱其他脚本和样式并增加页面加载量。

在我的例子中，问题出现在从 cf9 移动到 cf11(ext-all.css 的更新版本)时。希望能帮助到你!(感谢 Reto 的 box-sizing-fix!)