-
-
[原创]Django Web 框架和 zTree jquery 插件中 CSS 冲突调试及解决
-
发表于: 2013-9-12 18:57
-
最近想在使用 Django 框架的一个 Web 项目中使用 zTree jquery 插件(561K9s2c8@1M7q4)9K6b7g2)9J5c8W2)9J5c8Y4N6%4N6#2)9J5k6i4A6@1M7X3g2W2i4K6u0W2L8h3g2Q4x3V1k6Q4c8f1k6Q4b7V1y4Q4z5p5y4Q4c8e0k6Q4z5o6c8Q4z5f1k6Q4c8e0S2Q4b7e0N6Q4z5o6W2Q4c8e0k6Q4z5e0S2Q4b7V1g2Q4c8e0N6Q4b7e0c8Q4b7V1q4Q4c8e0k6Q4z5e0g2Q4z5o6S2Q4c8e0k6Q4z5f1g2Q4z5f1y4Q4c8e0W2Q4z5f1c8Q4z5f1g2Q4c8e0g2Q4b7U0S2Q4b7U0S2Q4c8e0g2Q4b7e0g2Q4b7V1c8Q4c8f1k6Q4b7V1y4Q4z5p5y4Q4c8e0k6Q4z5o6c8Q4z5f1k6Q4c8e0S2Q4b7U0m8Q4b7e0u0Q4c8e0c8Q4b7V1c8Q4z5f1y4Q4c8e0S2Q4z5o6m8Q4z5o6g2Q4c8f1k6Q4b7V1y4Q4z5o6q4Q4c8e0g2Q4z5f1u0Q4b7V1c8Q4c8e0c8Q4b7V1q4Q4b7V1q4Q4c8e0N6Q4z5f1q4Q4z5o6c8Q4c8e0S2Q4z5p5c8Q4b7e0y4Q4c8e0S2Q4z5o6m8Q4z5o6m8Q4c8f1k6Q4b7V1y4Q4z5o6q4Q4x3U0W2Q4c8f1k6Q4b7V1y4Q4z5p5y4Q4c8e0g2Q4z5p5k6Q4z5e0q4Q4c8e0N6Q4z5p5g2Q4b7U0m8Q4c8e0k6Q4z5e0S2Q4b7V1g2Q4c8e0N6Q4b7e0c8Q4b7V1q4Q4c8e0k6Q4z5f1y4Q4z5o6W2Q4c8e0W2Q4z5e0N6Q4b7f1g2Q4c8e0W2Q4b7e0u0Q4z5e0S2Q4c8f1k6Q4b7V1y4Q4z5p5y4Q4c8e0g2Q4b7e0k6Q4z5o6u0Q4c8e0c8Q4b7U0S2Q4z5p5u0Q4c8e0g2Q4z5f1u0Q4b7V1g2Q4c8e0k6Q4z5o6W2Q4z5o6m8Q4c8e0N6Q4b7e0c8Q4b7V1q4Q4c8f1k6Q4b7V1y4Q4z5f1p5`.
zTree demo 显示链接为：
a5dK9s2c8@1M7q4)9K6b7g2)9J5c8W2)9J5c8Y4N6%4N6#2)9J5k6i4A6@1M7X3g2W2i4K6u0W2L8h3g2Q4x3V1k6$3x3#2)9J5c8X3c8W2L8h3!0Q4x3X3g2H3K9s2m8Q4x3U0y4Q4y4h3j5I4x3o6t1`.
简单测试了下发现 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;”，问题就解决了。
|
|
|---|---|
