CSS ie6兼容性问题

hack

  • color:red;
  • color:red !important;/ Firefox、IE7支持 */
  • _color:red; / IE6支持 */
  • *color:red; / IE6、IE7支持 */
  • *+color:red; / IE7支持 */
  • color:red\9; / IE6、IE7、IE8支持 */
  • color:red\0; / IE8支持 */

不支持fixed问题?

用absolute + css expression来代替

  • #up {
  •         position: fixed;
  •         // right: 10px;
  •         bottom: 10px;
  •         margin-left: 5px;
  •         display: none;

  •         // ie6
  •         _position: absolute;
  •         _bottom: auto;
  •         _top: ~"expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))";
  • }

inline-block

  • .num {
  •         display: inline-block;
  •         width: 52px;
  •         height: 22px;
  •         text-align: center;
  •         color: #fff;
  • }
  • // ie7 ie6
  • .num {
  •         *display: inline;
  •         _display: inline;
  • }

png图片

  • correctPNG: function () {
  •                 $("img").one('load', function() {
  •                         var $t = $(this);
  •                         var img = $t.get(0);
  •                         var imgName = img.src.toUpperCase();
  •                         if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") {
  •                                 var imgID = (img.id) ? "id='" + img.id + "' ": "";
  •                                 var imgClass = (img.className) ? "class='" + img.className + "' " : "";
  •                                 var imgTitle = (img.title) ? "title='" + img.title + "' ": "title='" + img.alt + "' ";
  •                                 var imgStyle = "display:inline-block;" + img.style.cssText;
  •                                 if (img.align == "left") imgStyle = "float:left;" + imgStyle;
  •                                 if (img.align == "right") imgStyle = "float:right;" + imgStyle;
  •                                 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
  •                                 var width = $t.width();
  •                                 var height = $t.height();
  •                                 if(width == 0) {
  •                                         alert(width);
  •                                 }
  •                                 var height = $t.height();
  •                                 var strNewHTML = "";
  •                                 img.outerHTML = strNewHTML;
  •                         }
  •                 }).each(function() {
  •                   if(this.complete) $(this).load();
  •                 });
  •         },

fixed效果: 

absolute, top: 0, right: 0; left: 0; bottom: 0

  • .title-mask {
  • position: absolute;
  • left: 0;
  • right: 0;
  • top: 0;
  • bottom: 0;
  • background: @red;
  • opacity: 0.3;
  • _width: ~"expression((this.parentNode.offsetWidth) + 'px')";
  • _height: ~"expression((this.parentNode.offsetHeight) + 'px')";

IE透明背景

假设背景为黑色,70%半透明,对需要半透明的层用如下CSS

  • background-color: #000000; /* background color for IE */
  • filter: alpha(opacity=70); /* opacity filter for IE */
  • background-color: rgba(0, 0, 0, 0.7); /* for other browsers */ 

如果只做了这一步,在IE中子元素也会被用上滤镜而透明,所以对于不需要透明的子元素们需要改变层级使之不受滤镜作用,方法是明确做一个定位,即将position设置成relative,absolute或fixed中的一种。至于另外两种:static,其实也就是默认值,是不定位的,而inherit会直接被IE无视掉

IE 8, 7, 6 透明背景无法点击

给a加上一个background属性,写法

  • background:url(about:blank) 或  background:url(#)?

方法2. (推荐!)给a加任意背景颜色,再把透明度设为透明(隐藏颜色),写法:

  • background:#fff;opacity:0; filter:alpha(opacity=0);
  • ie6下line-height属性失效与解决办法 

ie6下line-height属性失效与解决办法

问题:在ie6中,当文字和img、input、textarea、select、object等对象在同一个容器中的时候,line-height属性失效。

只有全文字时,line-height属性才有效。

解决方法: 

在其中一个非文字的对象的样式中增加:

margin: (容器的line-height - 对象本身的高度)/2px 0;  

  • .cate-1-title {
  •     width: 113px;
  •     height: @navHeight;
  •     line-height: @navHeight;
  •     overflow: hidden;
  •     // 加一个i, inline-block
  •     i {
  •       font-style: normal;
  •       display: inline-block;
  •     }
  •     // 三角
  •     span {
  •       width: 0;
  •       // height: 0;
  •       height: 4px;
  •       overflow: hidden;
  •       display: inline-block;
  •     }
  • }