-
-
[原创]Django Web 框架和 zTree jquery 插件中 CSS 冲突调试及解决
-
发表于: 2013-9-12 18:57
-
最近想在使用 Django 框架的一个 Web 项目中使用 zTree jquery 插件(http://www.ztree.me/，感觉显示效果非常好，感谢作者！国人的荣耀！)，发现显示有问题，如下图所示：
zTree demo 显示链接为：
http://www.ztree.me/v3/demo.php#_102
简单测试了下发现 zTreeStyle.css 和 Django 中的 modern.css 冲突。框架中 “metrouicss” 这个类选择器是加在了 body 上：
<BODY class="metrouicss">
参考作者在 blog 上给出的 zTree DOM 结构：
在页面异常元素中右键点击“审查元素”调试分析。
li 内的第一个 span 对应着父节点的 +/- 号，应该使用如下样式：
.ztree li span.button.root_open{background-position:-92px -54px; width:18px; height:18px}
可在 Properties 窗口中看到的 width * height 确是 90px * 32px。
从 “Matched CSS Rules” 开始往下看，发现了如下样式定义：
.metrouicss .button {
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 9pt;
font-smooth: always;
line-height: 11pt;
font-size: 14px;
padding: 4px 12px;
line-height: 20px;
vertical-align: middle !important;
min-width: 90px;
min-height: 32px;
...
}
zTree 定义中的 被 width, height Django CSS 中的 min-width, min-height 覆盖了。在zTreeStyle.css 中如下几处定义中：
.ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: auto}
.ztree li span.button.switch {width:18px; height:18px}
.ztree li span.button {line-height:0; padding:0; margin:0; width:16px; height:16px;...}
加入 “min-width:1px; min-height:1px;” 屏蔽掉 “.metrouicss .button” 中的对应值，然后测试一下。本来以为这样就可以了，可还是有问题，如下图所示：
文件夹图标之后多了点东西，是 “zTreeStandard.png” 图片中的一部分。同样用以上方式调试，发现是 “padding” 设置被覆盖导致的。zTreeStyle.css 中的设置为 “.ztree * {padding:0;”，有些被框架中的如下设置覆盖了：
.metrouicss .button {
...
padding: 4px 10px;
position: relative;
...
}
在 zTreeStyle.css 中的相关位置加上 “padding:0;”，问题就解决了。
[培训]内核驱动高级班，冲击BAT一流互联网大厂工作，每周日13:00-18:00直播授课
|
|
|---|---|
