Posts Tagged ‘css’

• IE6中关于max-width、max-height以及PNG图片透明的一些hack技巧

  Date: 2009.05.30 | Category: Learn from Others, Web Front-end | Response: 0

  最近做网站的时候，又遇到了许多关于IE6方面头疼的事情。原来遇到min-width以及min-height的时候，可以通过!important来解决；不过这次又有了新的问题，max标签以及png图像透明的问题浮现了出来。

  搜索了一下网络，得到了一些如何处理这些问题的方法，记录下来。

  区别不同浏览器，CSS hack写法：

  区别IE6与FF：
         background:orange;*background:blue;

  区别IE6与IE7：
         background:green !important;background:blue;

  区别IE7与FF：
         background:orange; *background:green;

  区别FF，IE7，IE6：
         background:orange;*background:green !important;*background:blue;

  注：IE都能识别*;标准浏览器(如FF)不能识别*；
  IE6能识别*，但不能识别 !impo­r­tant,
  IE7能识别*，也能识别!important;
  FF不能识别*，但能识别!important;

  	IE6	IE7	FF
  *	√	√	×
  !impo­r­tant	×	√	√

  另外再补充一个，下划线“_”,
  IE6支持下划线，IE7和firefox均不支持下划线。

  于是大家还可以这样来区分IE6，IE7，firefox
  : background:orange;*background:green;_background:blue;

  注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

  IE下CSS的min-width/max-width以及min-height/max-height写法

  之前找过这方面的相关资料，网上一般都采用表达式的写法去处理最大最小的限制！但是在使用表达式后，效率会打一定的折扣。后来找到了IE支持最小限制的写法：
  IE6：_height/_width  等价于  min-height/min-width
  而最大限制在自己尝试后发现
  IE6：-height/-width  等价于  max-height/max-width

  IE6支持PNG透明(alpha通道)的4种方法

  想特别说明一下，IE6与生俱来就支持png8的索引色透明度，但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法，但都是以滤镜、Js、css 等作为基础模拟还原效果，虽然没有真正的解决alpha透明度问题，但也总算解决了燃眉之急。

  IE6支持png8透明: 
  IE6与生俱来就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8，因为体积会更小

  1.AlphaImageLoader 筛选器
    * 使用简介：在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘image.png’, sizingMethod=‘scale’)
    * 官方原文：http://support.microsoft.com/kb/294714/zh-cn
  2.PNG Tran­spa­rency in IE
    * 使用简介：相对来说比较简洁，使用一段包含滤镜的Java­Sc­ript 就可以模拟图片或背景 PNG alpha 透明度。
    * 官方原文：http://codingforums.com/archive/index.php?t-80555.html
  3.IE PNG Fix v1.0 / 2.0 Alpha 2
    * 使用简介：页面标签使用behavior:url(“iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
    * 官方原文：http://www.twinhelix.com/css/iepngfix/
  4.IE7/IE8 Java­Sc­ript lib­rary
    * 使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。
    * 官方原文：http://code.google.com/p/ie7-js/
    * 注意事项: 
       1. png图片必需要以-trans.png结尾,才能使用透明。如：shadow.png换成shadow-trans.png
       2. PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
    * Java­Sc­ript lib­rary还做出了很多更强大的改进详细参考：http://code.google.com/p/ie7-js/
    * 对于CSS中backgrond-position与background-repeat的支持，也有实现：http://dillerdesign.com/experiment/DD_belatedPNG/。他的原理就是利用微软的VML语言进行绘制，跟其它的利用AlphaImageLoader滤镜不同。当然在实际项目中，可能会遇到问题，就是他会增加额外代码，比如在页面中增加了一些xml，导致有的效果有点问题。 不过可以变通的解决。

  转自：
  1、http://www.div-css.com/html/XHTML-CSS/hack/1136667.html
  2、http://blog.csdn.net/kavendb/archive/2009/04/29/4135689.aspx
  3、http://blog.gulu77.com/?p=147
  4、http://www.cssrain.cn/article.asp?id=1355

  突然发现ie7-js是一个特别有用的js包，也许可以使用它解决很多IE6中比较麻烦的问题。正在研究中。

  • 

• 在IE6里准确显示较小高度的DIV层

  Date: 2009.03.23 | Category: Web Front-end | Response: 1

  在做网页设计的时候，尤其是给咱们国内做网站，一定要考虑到兼容性的问题。Firefox、Chrome、Safari、IE8这类对于CSS标准支持的比较好的网站，基本上测试一种就差不多行了（一些Javascript除外）。但是对于IE6、IE7这两个浏览器，要区别对待。特别是IE6，支持CSS一点都不好，自己说了算，但是在国内却有数量庞大的电脑依然在使用IE6浏览器。我想这与安装了盗版XP并禁用了自动更新功能有关吧。

  转到今天的主要话题。在给一个朋友做网站的时候，发现有个小问题。在我定义的一个div层中，只有一条横线，高度为4px。在IE8、Firefox、Chrome中均显示正确，但是在IE6中却显示出了三条线，而这个div的高度也增加为15px。于是我将高度设成10px，依然不见效，但是设置成30px的时候，高度就增加出来了。这说明这个div盒子里面并不是空的，尽管我在<div></div>中间连一个空格也没有。

  没错，这就是字体虚占位了。IE6默认按照字体大小min-height了一下这个div层，才会出现如此的问题。所以我们将计就计，把字体大小设成0不就好了？再加上一个overflow的hidden，一切就完美了。

  建议定义一个css的class来处理这类的问题，我是这么干的：

  .miniboxhack{font-size:0; overflow:hidden;}

  问题解决了。

  • 

• 解决IE6、IE7在CSS中设置最小高度遇到的问题

  Date: 2008.07.07 | Category: Web Front-end | Response: 0

  在开发一个某公司的网页界面时，遇到了这样的问题：当设置某一个区域的最小高度为某个值的时候，在Firefox、IE6以及IE7中的表现并不一样。如果只是设定了min-height值，那么在IE6中不能识别；但设定了height值，在IE7和Firefox中，位置就会固定了。这是一个很大的问题。那么为了协调各个浏览器和各个版本，我们怎样做才能解决最小高度的问题呢？

  我在网络上寻找了一些相关资料，有一种解决方法比较好：

  .distance {
  height:auto!important;
  height:100px;
  min-height:100px;
  }

  !import（优先）标签在IE6中并不认识，所以在IE6中上述代码会被理解成为：

  height:100px;
  min-height:100px;

  而在IE7中则是：

  height:auto;
  min-height:100px;

  在这里，我们所利用的特性是：

  • IE6不能识别 !impo­r­tant 标签;
  • IE6不能识别 min-height 标签;
  • IE6中的高度(height)标签的最终效果等同于IE7与Firefox浏览器中的最小高度(min-height)标签;

  最终便可以解决上述问题。

  • 

2008.11.Trip-of-GuangXi ASP.net C++ China Chrome css dotNet FCGuoAn Firefox Football gmail IBM IE IIS IT Association Joke Microsoft music mysql NLP Nokia ntfs NumPy OpenSolaris open source Open Team php pidgin PKUSS Python Python Challenge qq Samba SciPy Learning shell solaris SQL SUN Thunderbird Travel web host Win 7 WordPress X11 zfs

WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.