Drupal7中解决IE6的png透明问题

发布于大漠

13 年前

做前端的朋友都知道，png32的透明图片在IE下显示会带有一种兰色背景色一样，为了处理这样的兼容问题，我想大家都很头痛，以前只在静态页面下通过DD_belatedPNG的js来处理过这样的bug，但在Drupal下fix这样的bug还是第一次，因此也是费了很久的时间，还多亏朋友帮忙，才解决这样的一个兼容问题。

在Drupal花园龙马介绍过Drupal6下如何处理这样的问题，但按其方面在drupal官网上还没有支持drupal7的模块，这样也让我头痛之极。也是在朋友的指导下，按静态页面的处理方法来实现drupal7的IE6的png透明图片的兼容问题，但是应用到drupal中来就没有效果了，这样让我纠结了许久。后来结过尝试性的解决，终于让我成功了。于是总结下贴出来跟大家一起分享一下。

好了，废话我就少说了，我们先来看一个静态页面下的效果，然后我们在来看看在drupal中的应用效果。先举个例子来说吧（为了节省空间，我在这里只例了用了背景图片或者是有图片的img的HTML标签）：

HTML CODE：

<div class="pngfix" id="logo">

</div>
<div class="pngfix">
    <img src="images/logo.png" alt="logo" />
</div>

从代码中我们可以清楚的看出，我们这里应用了两个叫pngfix的div，其中第一个div中没有任何东西，因为我们在这个div中应用一个背景，第二个div中我们放了一张叫logo的图片，为了更好的看出效果，我们给其加点样式，如下：

#logo {
   width: 115px;
   height: 70px;
   background: url("images/logo.png") no-repeat left top;
   margin-bottom: 20px;
}

我们来看看两个效果：

从上面的效果中我们可以看出，正如我们一开始说的，在IE6下png32的图片不管是应用在背景上还是直接应用在页面上，前生的效果都是一样的“还有一种兰色的背景色”，这样一来造成不协调的效果。下面我们来看看如何来兼容这样的问题。其思路就是：

第一、首先我们需要一个DD_belatedPNG的脚本JS文件，这个文件可以直接在网上下载，（如果下载不到的，可以直接找我）。

第二、我们把这个下载的js文件加载到页面上

第三、我们需要创建另外一个js文件，然后把有png图片的html标签应用进去

那么我们清楚了思路，我们就来仔细看其解决的办法：

第一：下载一个DD_belatedPNG文件，然后放到你的项目的js文件目录下或者别的目录下（不能放到项目外的目录中），我习惯放在一个叫js的文件目录中。如：

第二、把我们刚下载下来的DD_belatedPNG文件加载到网页的头部中，这里需要注意一点，因为我们这个bug只有在IE6存在，所以我们没有必要把别的浏览器也牵涉进来加载这样一个没有必要的 js文件，来影响网站的运行性能，所以我们就条件性的加载进来：

<!--[if lt IE 7]>
    <script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<![endif]-->

这里需要提醒大家，DD_belatedPNG文件的路径需要正确，如果不正确的话是没有效果的哟，从代码中大家都知道我们只在小于IE7的浏览器中才加载这个脚本js文件。我们现在在浏览器中来查看其源代码的变化吧：是不是在页面的头部之中加载了上面的一代码呀。

第三、完成上面一段后，我们需要在创建一个js文件，用来放置需要处理png32的图片的html标签元素，我在这里创建了一个叫做ie6_js.js的文件，当然你也可以根据你自己的想法取个名字，然后来我们在这个文件中加上需要处理的png标签元素，其格式是这样的：

//**  design dy pongcn //

DD_belatedPNG.fix('.pngfix')

保存你这个文件，你刷新后怎么还是老样子呢？没有效果的呀。告诉你吧，因为你太急了，虽然我们创建了这么一个文件，而且进行了处理，但是最关键的一步我们没有做，那就是给页面加载这个js文件，所以就造成了刚才所说的没有效果的问题。那么我们按照给页面加载DD_belatedPNG文件的方法来加载刚才创建的ie6_js.js这个文件，因为我们这个文件也只是需要用在ie6下的，所以老办法加就行了,如：

<!--[if lt IE 7]>
  <script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
  <script src="js/ie6_js.js"></script>
<![endif]-->

现在在去看效果吧：

怎么样，现在红色圈住的部分是不是没有兰色的背景了，这样来就说明我们的操作成功了，那为什么第二个图片没有效果呢？我想我不说大家都知道，因为我们只给第一div加载了一个处理，而第二个没有加，所以第一个div 的背景显示正常化了，而第二直接插入的图处没有效果，现在我们接着来处理，按同样的方法，我们只要把这个img加载到刚才的ie6_js.js的文件中，具体怎么加呢？很简单，只要把相应的元素标签追加进去，并用逗号“，”隔开就行了：

//**  design dy pongcn //

DD_belatedPNG.fix('.pngfix,.pngfix img')

把文件保存一下，赶快去IE6下看看效果吧：

是不是完美了，达到了和别的浏览器下一样的效果了吧。在告诉大家一个绝活，如果不想在每个运用了背景图片的或img的div都加进来话，大家可以在有png32的背景图和img标符的元素中加入一个class叫pngfix名，当然也可以是你喜欢的哟。绝对好使用，不信试试。

上面我们主要介绍了如何在静态页面下解决IE6中png32的透明背景图的问题，那么在Drupal中是不是按在静态页面的方法加载刚才那两个文件也就行了呢？原理上是行得通的，但是我按照drupal中加载js的方法都没有成功，第一种加载的方法就是直接在主题的info文件中加载：

;Scripts===========
scripts[] = js/DD_belatedPNG_0.0.8a-min.js
scripts[] = js/ie6_js.js

查看源代码,看见两个js文件都加载进来了：

<script type="text/javascript" src="http://badgebag.local/sites/all/themes/badgebag/sites/all/themes/badgebag/js/DD_belatedPNG_0.0.8a-min.js?lkvhlc"></script>

<script type="text/javascript" src="http://badgebag.local/sites/all/themes/badgebag/sites/all/themes/badgebag/js/ie6_js.js?lkvhlc"></script>

虽然文件是加载进来了，但是到IE6下查看效果，还是老样子，一动也不动。这下就纠结了，难道是自己加载的方面错了，于是换过第二种加载的方法，也就是在主题中的template.tpl.php中加载：

function badgebag_preprocess_html(&$variables) {
 drupal_add_js(path_to_theme() . '/js/DD_belatedPNG_0.0.8a-min.js', array('group' => JS_THEME, 'browsers' => array('IE' => 'IE', '!IE' => FALSE), 'preprocess' => FALSE));

 drupal_add_js(path_to_theme() . '/js/ie6_js.js', array('group' => JS_THEME, 'browsers' => array('IE' => 'IE', '!IE' => FALSE), 'preprocess' => FALSE));
}

记得上面的“badgebag”换成你的主题名，同样查看源代码，两个Js文件都加载进来了，但还是没有效果。这下彻底要让我崩溃了，究竟是为什么呢？为了尽量解决这个问题，我使用了最原始的办法，也就是给这个主题单独创建一个html.tpl.php文件（因为在drupal7中头部都单独分割出来了），于是把这两个文件按静态页面的方法加载进来：

<?php

?>
<!DOCTYPE html>
<html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?>>
  <head profile="<?php print $grddl_profile; ?>">
    <?php print $head; ?>
    <title><?php print $head_title; ?></title>
    <?php print $styles; ?>
    <?php print $scripts; ?>
        <!--[if lt IE 7]>
        <script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
        <script src="js/ie6_js.js"></script>
    <![endif]-->
  </head>
  <body class="<?php print $classes; ?>" <?php print $attributes;?>>
    <div id="skip-link">
      <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
    </div>
    <?php print $page_top; ?>
    <?php print $page; ?>
    <?php print $page_bottom; ?>
  </body>
</html>

上面代码中我们最关键的是下面几句才是我们解决问题最关键需要的东西：

<!--[if lt IE 7]>
   <script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
   <script src="js/ie6_js.js"></script>
<![endif]-->

这下查看页面的源代码：

<!--[if lt IE 7]>
  <script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
  <script src="js/ie6_js.js"></script>
<![endif]-->

仔细一对照，跟我们在静态页面中显示的是一模一样，这就心里有点美了，于是赶快到IE6下测试，结果是希望越大失望也越大呀，一样是如初没有动静。这下我也傻了，于是停下手来，仔细想呀——是不是我们路径还是什么有问题呢？到了这里，反正是死马当活马医吧，我也抱着试试看的心情，把在html.tpl.php加载js的路径改变了一下，不单是从js目录下，我换高级一点，找到了“sites/themes/badgebag/js”下，：

<!--[if lt IE 7]>
   <script src="/sites/all/themes/badgebag/js/DD_belatedPNG_0.0.8a-min.js"></script>
   <script src="/sites/all/themes/badgebag/js/ie6_js.js"></script>
<![endif]-->

换过路径后，到IE6下一查看，大家想想出现什么了？真是奇迹般的好了，这下让我喜的呀，乐得呀，不得了。为了能把快乐与大家一起分享，我停下来马上贴了这篇文章出来，与大家同乐。最后附上在drupal7下处理ie6的png32透明图片的正常代码：

<?php

?>
<!DOCTYPE html>
<html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?>>
  <head profile="<?php print $grddl_profile; ?>">
    <?php print $head; ?>
    <title><?php print $head_title; ?></title>
    <?php print $styles; ?>
    <?php print $scripts; ?>
        <!--[if lt IE 7]>
        <script src="/sites/all/themes/badgebag/js/DD_belatedPNG_0.0.8a-min.js"></script>
        <script src="/sites/all/themes/badgebag/js/ie6_js.js"></script>
    <![endif]-->
  </head>
  <body class="<?php print $classes; ?>" <?php print $attributes;?>>
    <div id="skip-link">
      <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
    </div>
    <?php print $page_top; ?>
    <?php print $page; ?>
    <?php print $page_bottom; ?>
  </body>
</html>

最后提醒一下，记得把路径换成你项目的路径。另外在info和template.tpl.php文件中更改路径，能否行得通，我没有测试过，如果感兴趣的朋友可以自己测试一下。那么今天就到这了。

如需转载请注明出处：W3CPLUS

Match Jordan 8 Take Flight 23 Camo Military Green T-shirt