我有一个母版页类型的设置,其中加载母版页并单击不同的选项卡在页面中加载不同的子页面。当直接在浏览器中加载时,我的一个页面运行良好,但当在母版页中加载时,格式困惑 - 所有标题都被压缩/压扁,间距关闭......我追踪到以下正在应用的 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 之外,我该如何解决这个问题?
最佳答案
对我来说,一种快速实用的方法就是覆盖特定的 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!)
关于css - ColdFusion ext-all.css 搞乱了页面格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32066377/