当 CSS 和 JS 缩小时，Fancybox 关闭按钮消失答案

【问题标题】：Fancybox close button disapears when CSS and JS minified当 CSS 和 JS 缩小时，Fancybox 关闭按钮消失
【发布时间】：2012-03-02 17:55:45
【问题描述】：

我使用 Yahoo YUI Compressor for .net 来缩小我的 css 和 js 并且由于某种原因我的 fancybox 关闭按钮没有出现。如果我使用非缩小的 css 和 js 文件，那么它看起来没问题。任何想法为什么会发生这种情况？

这是我的构建文件的相关部分

<ItemGroup>
      <CssFiles Include="../src/UserInterface/Content/css/styles.css" />
      <CssFiles Include="../src/UserInterface/Content/css/mcfcStyle.css" />
      <CssFiles Include="../src/UserInterface/Content/js/fancybox/jquery.fancybox-1.3.4.css"/>
      <JavaScriptFiles Include="../src/UserInterface/Scripts/jquery-1.6.4.min.js">
        <CompressionType>None</CompressionType>
      </JavaScriptFiles >
      <JavaScriptFiles Include="../src/UserInterface/Scripts/jquery.cycle.all.latest.min.js">
        <CompressionType>None</CompressionType>
      </JavaScriptFiles >
      <JavaScriptFiles Include="../src/UserInterface/Scripts/jquery.countdown.min.js">
        <CompressionType>None</CompressionType>
      </JavaScriptFiles >
      <JavaScriptFiles Include="../src/UserInterface/Scripts/jquery.carouFredSel-5.5.0-packed.js"/>
      <JavaScriptFiles Include="../src/UserInterface/Scripts/jquery.tipsy.js"/>
      <JavaScriptFiles Include="../src/UserInterface/Scripts/script.js"/>
      <JavaScriptFiles Include="../src/UserInterface/Content/js/fancybox/jquery.fancybox-1.3.4.pack.js"/>
    </ItemGroup>

顺便说一下我们今天部署的方式，所以我需要修复一下。

在styles.css中我有

.close-history { display:block; width:30px; height:30px; background: url(../js/fancybox/fancy_close.png) no-repeat; text-indent: -999em; position:absolute; top:-15px; right:-15px; }

在 jquery.fancybox-1.3.4.css 我有

.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale'); }

【问题讨论】：

关闭按钮是否在 DOM 中？如果不是，我们可以将其隔离为 JS 问题，如果是但未正确呈现，则可能是 CSS 问题。
构建顺序是否与您页面中的包含顺序相同？
上述这些文件的顺序与非缩小模式中包含的文件的顺序完全相同。
美化两个文件（正常和缩小，然后用您选择的程序对它们进行比较）。您将看到被咀嚼的东西，并且能够修复它。
这似乎是一个路径问题。我会为你的 js 和 css 文件设置一个绝对路径。还要确保fancybox sprite fancybox.png 位于fancybox css 文件的同一目录下。如果问题出在 IE 上，请检查 groups.google.com/group/fancybox/browse_thread/thread/…

标签： javascript .net css fancybox minify

【解决方案1】：

10 次中有 9 次，这是 img 背景的路径问题。缩小后css中背景的相对路径是否仍然正确？

【讨论】：