Heim > Web-Frontend > HTML-Tutorial > css兼容性问题的整理_html/css_WEB-ITnose

css兼容性问题的整理_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:34:00
Original
1004 Leute haben es durchsucht

1.文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。

2.ff下容器高度限定.即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。

3. 横向上的内容撑破容器问题。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。

4.浮动的清除,ff下必须清除浮动clear:both。

5. double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案,给浮动容器定义display:inline。

6.margin bug.当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件。解决方案:外层元素设定border 或设定float。

7.吞吃现象.还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。

8.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“ picRotate start ”方法写注释。

9.img下的留白,大家看这段代码有啥问题:

把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,给img设定 display:block可以解决。

10去line-height。

css兼容性问题的整理_html/css_WEB-ITnose文字
,很遗憾,在ie6下单行文字 line-height 效果消失了。。。,原因是css兼容性问题的整理_html/css_WEB-ITnose这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。

11链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时,链接里包含的图片宽度变化,可惜在ie6下无效,ie7、ff下有效。

12链接的hover状态。div:hover{} 这样的样式ie6是不认的,在ie7、ff下才有效果。

13block化的a链接,其内套absolute层,absolute层内放置img,ie下,鼠标点击img不会有链接效果,ff下正常。

14无法彻底清除的float。解决方案:给ul 属性zoom:1 (给li 加zoom:1 没用)

15ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案:给overflow:hidden加position:relative或者position:absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

16.ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。

17.ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。

18.ie下的bug,

内有的情况下,position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

19.ff的缺点。width:100%在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊。

20.iE6的问题。当层的高度小于20px时,IE6下要定义font-size:0px;否则高度为20px;

21.ff下,只有body和html同时定义height:100%,高度才为100%。IE下只需要定义body.

22.div的垂直居中问题:

vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行.

23. IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

24.么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html

25.链接(a标签)的边框与背景

a链接加边框和背景色,需设置 display: block,

26..ul标签在ff中默认是有padding值的,而在IE中只有margin有值

所以先定义ul{margin:0;padding:0;}就能解决大部分问题

27.ff: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

ff: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

28.tu片居中,文字居左的写法。

.abc{ text-align:left }

 abc img{ display:block ; text-align:center;margin:o auto; }

29.层垂直居中的样式:

div{

    position:absolute;

    top:50%;

    left:50%;

    margin:-117px 0 0 -187px;

    width:374px;

    height:234px;

    background-image:url(images/beijing.jpg);

    }

30.form在IE6里面底下会多出来一行,加上 style="max-width:90%"

32.空td显示边框 table { border-collapse:collapse; }

33.鼠标经过图片变化图片

function imagechange(img)

{

 document.images[0].src=img;

 document.images[0].width=400;

 document.images[0].height=300;

 }

 css兼容性问题的整理_html/css_WEB-ITnose

34.表单输入框默认文字的设置

function cleanUp(id){

    if(document.getElementById("userid").value == "请输入搜索关键字")

    {

        document.getElementById(id).value = "";

    }

}

35.透明兼容写法:

filter:alpha(opacity=70);-moz-opacity:0.7;

36 文字和图片在同一行垂直居中问题:

一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的 style="max-width:90%" 这样文字和图片就居中了

兼容性一直都是个令人头痛的问题,下面简单总结火狐与IE的兼容性问题。

37. 超链接访问过后hover样式就不出现的问题 
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A 

1.  

2.            

8.   

38. FireFox下如何使连续长字段自动换行 
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 

1.  

2.   

9.   

10.

这里是文字
 

 Js代码

1.            

2.      /* 

3.          function toBreakWord(el, intLen){      

4.              var ōbj=document.getElementById(el);      

5.              var strContent=obj.innerHTML;        

6.              var strTemp="";      

7.              while(strContent.length>intLen){      

8.                  strTemp+=strContent.substr(0,intLen)+"      

9.  ";  

10.                strContent=strContent.substr(intLen,strContent.length);        

11.            }  

12.            strTemp+="  

13."+strContent;  

14.            obj.innerHTML=strTemp;      

15.        }      

16.        if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);      

17.    /* ]]> */     

18.     

 

39.ff下为什么父容器的高度不能自适应 
在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。 

1.  clear:both; 

2.  样式中加入

.clearfix:after {content:"."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display:inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

然后在有浮动的层的外边加入这个clearfix的样式,如下:

  

  

  

40.IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上

1.  display: inline 

41. IE6下绝对定位的容器内文本无法正常选择
此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识,请参考: 
http://www.microsoft.com/..

42. IE6下图片下方有空隙产生 
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block
或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom都可以解决.

43. IE6下两个层中间有间隙 
这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

44. list-style-image无法准确定位
list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。

45. LI中内容超过长度后以省略号显示的方法 
此方法适用与IE与OP浏览器 

1.  

2.   

3.    li {      

4.      width: 200px;      

5.      white-space:nowrap;      

6.      text-overflow:ellipsis;       

7.      -o-text-overflow:ellipsis;       

8.      overflow: hidden;      

9.      }      

10. -->      

11. 

 

46.web标准中定义id与class有什么区别吗 
一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以  使用他. 
二.属性的优先级问题 
ID 的优先级要高于class,看上面的例子 
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

47.如何垂直居中文本 
将元素高度和行高设为一致。 

1.  

2.     

9.   

48.如何对齐文本与文本输入框
加上 vertical-align:middle; 

1.  

2.      

10.  

49.FF下面不能水平居中呢 
FF下面设置容器的左右外补丁为auto就可以了

1.  

2.      

7.    

50.FF下文本无法撑开容器的高度 
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: 

1.  {  

2.     height:auto!important;  

3.     height:200px;  

4.     min-height:200px;  

5.   } 

51.IE6下容器的宽度和FF解释不同呢 

1.   

2.  nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

3.   

4.      

5.       

13.     

14.

web标准常见问题大全
 

问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考: 
http://www.microsoft.com/..

52.    为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html 

1.  nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

2.   

3.  

4.   

15. 

53.    为什么我定义的样式没有作用呢 
这里你无法用.aa定义到li 遇到这种情况怎么解决呢?答案是提高.aa 的优先权 比如#aa ul li.aa 

1.  nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

2.   

3.  

4.       

12.      

13.

      

14.

     

    15.

  •       

    16. web标准常见问题大全  

    17.

  •  

    18.

 

19.

 

54.  IE6无法定义1px左右高度的容器 
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:

1.  overflow:hidden zoom:0.08 line-height:1px 

55.    背景颜色无法显示 

1.  nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

2.   

3.  

4.   

13. 

14.    

19.

     

    20.

  • web标准常见问题大全
  •  

    21.

  • web标准常见问题大全
  •  

    22.

  • web标准常见问题大全
  •  

    23.

  • web标准常见问题大全
  •  

    24.

  • web标准常见问题大全
  •  

    25.

     

    26.

 

IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考 http://www.satzansatz.de/cssd/onhavinglayout.htm 
解决方法之一: 

1.         

6.   

 

56.    怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明 

1.    

 

57.    怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 

1.  

2.        

13.  

 

58.    图片垂直与容器内 

1.  nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

2.  

3.   

28. 

29.

css兼容性问题的整理_html/css_WEB-ITnose

 

59.或者使用背景图的办法: 

1.  background:url("logo.gif") center no-repeat; 

 

60.    如何让div横向排列
横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等. 

1.  nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">      

2.        

3.  

4.   

12. 

13.

web标准常见问题大全
 

14.

web标准常见问题大全
 

15.

web标准常见问题大全
 

61.Firefox 关于DIV高度无法自适应的两种解决
如果设置了一个DIV的高度,当DIV里实际内容大于所设高度,ie会自动拉伸以适应DIV容器大小,ff会固定DIV的高度,超过部分超出DIV底线以外,
出现和下面的内容重叠的现象。如果不给DIV设置高度,在Firefox中将不回因为里面的内容而撑开,而IE中就会自动根据内容撑开
解决方案:
第一种方法:在DIV内部的最后追加clear:both样式

1.  

 

2.      

Jmedia Design
 

3.      

www.jmedia.cn
 

4.      

 

5.  

 

第二种方法:对DIV使用overflow:auto;

1.  

 

2.      

1111111111
 

3.      

2222222222
 

4.  

 

 62.兼容ie的图片背景透明的方法:

第一种方法:将图片格式定义为png8,设置精确,抖动100%

第二种方法:利用js(js源码如下,但图片过多的页面不推荐使用)

var DD_belatedPNG = {
ns: 'DD_belatedPNG',
imgSize: {},
delay: 10,
nodesFixed: 0,
createVmlNameSpace: function () { /* enable VML */
if (document.namespaces && !document.namespaces[this.ns]) {
document.namespaces.add(this.ns, 'urn:schemas-microsoft-com:vml');
}
},
createVmlStyleSheet: function () { /* style VML, enable behaviors */
/*
Just in case lots of other developers have added
lots of other stylesheets using document.createStyleSheet
and hit the 31-limit mark, let's not use that method!
further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx
*/
var screenStyleSheet, printStyleSheet;
screenStyleSheet = document.createElement('style');
screenStyleSheet.setAttribute('media', 'screen');
document.documentElement.firstChild.insertBefore(screenStyleSheet, document.documentElement.firstChild.firstChild);
if (screenStyleSheet.styleSheet) {
screenStyleSheet = screenStyleSheet.styleSheet;
screenStyleSheet.addRule(this.ns + '\\:*', '{behavior:url(#default#VML)}');
screenStyleSheet.addRule(this.ns + '\\:shape', 'position:absolute;');
screenStyleSheet.addRule('img.' + this.ns + '_sizeFinder', 'behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;'); /* large negative top value for avoiding vertical scrollbars for large images, suggested by James O'Brien, http://www.thanatopsic.org/hendrik/ */
this.screenStyleSheet = screenStyleSheet;

/* Add a print-media stylesheet, for preventing VML artifacts from showing up in print (including preview). */
/* Thanks to R?i Pr?ost for automating this! */
printStyleSheet = document.createElement('style');
printStyleSheet.setAttribute('media', 'print');
document.documentElement.firstChild.insertBefore(printStyleSheet, document.documentElement.firstChild.firstChild);
printStyleSheet = printStyleSheet.styleSheet;
printStyleSheet.addRule(this.ns + '\\:*', '{display: none !important;}');
printStyleSheet.addRule('img.' + this.ns + '_sizeFinder', '{display: none !important;}');
}
},
readPropertyChange: function () {
var el, display, v;
el = event.srcElement;
if (!el.vmlInitiated) {
return;
}
if (event.propertyName.search('background') != -1 || event.propertyName.search('border') != -1) {
DD_belatedPNG.applyVML(el);
}
if (event.propertyName == 'style.display') {
display = (el.currentStyle.display == 'none') ? 'none' : 'block';
for (v in el.vml) {
if (el.vml.hasOwnProperty(v)) {
el.vml[v].shape.style.display = display;
}
}
}
if (event.propertyName.search('filter') != -1) {
DD_belatedPNG.vmlOpacity(el);
}
},
vmlOpacity: function (el) {
if (el.currentStyle.filter.search('lpha') != -1) {
var trans = el.currentStyle.filter;
trans = parseInt(trans.substring(trans.lastIndexOf('=')+1, trans.lastIndexOf(')')), 10)/100;
el.vml.color.shape.style.filter = el.currentStyle.filter; /* complete guesswork */
el.vml.image.fill.opacity = trans; /* complete guesswork */
}
},
handlePseudoHover: function (el) {
setTimeout(function () { /* wouldn't work as intended without setTimeout */
DD_belatedPNG.applyVML(el);
}, 1);
},
/**
* This is the method to use in a document.
* @param {String} selector - REQUIRED - a CSS selector, such as '#doc .container'
**/
fix: function (selector) {
if (this.screenStyleSheet) {
var selectors, i;
selectors = selector.split(','); /* multiple selectors supported, no need for multiple calls to this anymore */
for (i=0; i this.screenStyleSheet.addRule(selectors[i], 'behavior:expression(DD_belatedPNG.fixPng(this))'); /* seems to execute the function without adding it to the stylesheet - interesting... */
}
}
},
applyVML: function (el) {
el.runtimeStyle.cssText = '';
this.vmlFill(el);
this.vmlOffsets(el);
this.vmlOpacity(el);
if (el.isImg) {
this.copyImageBorders(el);
}
},
attachHandlers: function (el) {
var self, handlers, handler, moreForAs, a, h;
self = this;
handlers = {resize: 'vmlOffsets', move: 'vmlOffsets'};
if (el.nodeName == 'A') {
moreForAs = {mouseleave: 'handlePseudoHover', mouseenter: 'handlePseudoHover', focus: 'handlePseudoHover', blur: 'handlePseudoHover'};
for (a in moreForAs) {
if (moreForAs.hasOwnProperty(a)) {
handlers[a] = moreForAs[a];
}
}
}
for (h in handlers) {
if (handlers.hasOwnProperty(h)) {
handler = function () {
self[handlers[h]](el);
};
el.attachEvent('on' + h, handler);
}
}
el.attachEvent('onpropertychange', this.readPropertyChange);
},
giveLayout: function (el) {
el.style.zoom = 1;
if (el.currentStyle.position == 'static') {
el.style.position = 'relative';
}
},
copyImageBorders: function (el) {
var styles, s;
styles = {'borderStyle':true, 'borderWidth':true, 'borderColor':true};
for (s in styles) {
if (styles.hasOwnProperty(s)) {
el.vml.color.shape.style[s] = el.currentStyle[s];
}
}
},
vmlFill: function (el) {
if (!el.currentStyle) {
return;
} else {
var elStyle, noImg, lib, v, img, imgLoaded;
elStyle = el.currentStyle;
}
for (v in el.vml) {
if (el.vml.hasOwnProperty(v)) {
el.vml[v].shape.style.zIndex = elStyle.zIndex;
}
}
el.runtimeStyle.backgroundColor = '';
el.runtimeStyle.backgroundImage = '';
noImg = true;
if (elStyle.backgroundImage != 'none' || el.isImg) {
if (!el.isImg) {
el.vmlBg = elStyle.backgroundImage;
el.vmlBg = el.vmlBg.substr(5, el.vmlBg.lastIndexOf('")')-5);
}
else {
el.vmlBg = el.src;
}
lib = this;
if (!lib.imgSize[el.vmlBg]) { /* determine size of loaded image */
img = document.createElement('img');
lib.imgSize[el.vmlBg] = img;
img.className = lib.ns + '_sizeFinder';
img.runtimeStyle.cssText = 'behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;'; /* make sure to set behavior to none to prevent accidental matching of the helper elements! */
imgLoaded = function () {
this.width = this.offsetWidth; /* weird cache-busting requirement! */
this.height = this.offsetHeight;
lib.vmlOffsets(el);
};
img.attachEvent('onload', imgLoaded);
img.src = el.vmlBg;
img.removeAttribute('width');
img.removeAttribute('height');
document.body.insertBefore(img, document.body.firstChild);
}
el.vml.image.fill.src = el.vmlBg;
noImg = false;
}
el.vml.image.fill.on = !noImg;
el.vml.image.fill.color = 'none';
el.vml.color.shape.style.backgroundColor = elStyle.backgroundColor;
el.runtimeStyle.backgroundImage = 'none';
el.runtimeStyle.backgroundColor = 'transparent';
},
/* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1, and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */
vmlOffsets: function (el) {
var thisStyle, size, fudge, makeVisible, bg, bgR, dC, altC, b, c, v;
thisStyle = el.currentStyle;
size = {'W':el.clientWidth+1, 'H':el.clientHeight+1, 'w':this.imgSize[el.vmlBg].width, 'h':this.imgSize[el.vmlBg].height, 'L':el.offsetLeft, 'T':el.offsetTop, 'bLW':el.clientLeft, 'bTW':el.clientTop};
fudge = (size.L + size.bLW == 1) ? 1 : 0;
/* vml shape, left, top, width, height, origin */
makeVisible = function (vml, l, t, w, h, o) {
vml.coordsize = w+','+h;
vml.coordorigin = o+','+o;
vml.path = 'm0,0l'+w+',0l'+w+','+h+'l0,'+h+' xe';
vml.style.width = w + 'px';
vml.style.height = h + 'px';
vml.style.left = l + 'px';
vml.style.top = t + 'px';
};
makeVisible(el.vml.color.shape, (size.L + (el.isImg ? 0 : size.bLW)), (size.T + (el.isImg ? 0 : size.bTW)), (size.W-1), (size.H-1), 0);
makeVisible(el.vml.image.shape, (size.L + size.bLW), (size.T + size.bTW), (size.W), (size.H), 1 );
bg = {'X':0, 'Y':0};
if (el.isImg) {
bg.X = parseInt(thisStyle.paddingLeft, 10) + 1;
bg.Y = parseInt(thisStyle.paddingTop, 10) + 1;
}
else {
for (b in bg) {
if (bg.hasOwnProperty(b)) {
this.figurePercentage(bg, size, b, thisStyle['backgroundPosition'+b]);
}
}
}
el.vml.image.fill.position = (bg.X/size.W) + ',' + (bg.Y/size.H);
bgR = thisStyle.backgroundRepeat;
dC = {'T':1, 'R':size.W+fudge, 'B':size.H, 'L':1+fudge}; /* these are defaults for repeat of any kind */
altC = { 'X': {'b1': 'L', 'b2': 'R', 'd': 'W'}, 'Y': {'b1': 'T', 'b2': 'B', 'd': 'H'} };
if (bgR != 'repeat' || el.isImg) {
c = {'T':(bg.Y), 'R':(bg.X+size.w), 'B':(bg.Y+size.h), 'L':(bg.X)}; /* these are defaults for no-repeat - clips down to the image location */
if (bgR.search('repeat-') != -1) { /* now let's revert to dC for repeat-x or repeat-y */
v = bgR.split('repeat-')[1].toUpperCase();
c[altC[v].b1] = 1;
c[altC[v].b2] = size[altC[v].d];
}
if (c.B > size.H) {
c.B = size.H;
}
el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)';
}
else {
el.vml.image.shape.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)';
}
},
figurePercentage: function (bg, size, axis, position) {
var horizontal, fraction;
fraction = true;
horizontal = (axis == 'X');
switch(position) {
case 'left':
case 'top':
bg[axis] = 0;
break;
case 'center':
bg[axis] = 0.5;
break;
case 'right':
case 'bottom':
bg[axis] = 1;
break;
default:
if (position.search('%') != -1) {
bg[axis] = parseInt(position, 10) / 100;
}
else {
fraction = false;
}
}
bg[axis] = Math.ceil( fraction ? ( (size[horizontal?'W': 'H'] * bg[axis]) - (size[horizontal?'w': 'h'] * bg[axis]) ) : parseInt(position, 10) );
if (bg[axis] % 1 === 0) {
bg[axis]++;
}
return bg[axis];
},
fixPng: function (el) {
el.style.behavior = 'none';
var lib, els, nodeStr, v, e;
if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR') { /* elements not supported yet */
return;
}
el.isImg = false;
if (el.nodeName == 'IMG') {
if(el.src.toLowerCase().search(/\.png$/) != -1) {
el.isImg = true;
el.style.visibility = 'hidden';
}
else {
return;
}
}
else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1) {
return;
}
lib = DD_belatedPNG;
el.vml = {color: {}, image: {}};
els = {shape: {}, fill: {}};
for (v in el.vml) {
if (el.vml.hasOwnProperty(v)) {
for (e in els) {
if (els.hasOwnProperty(e)) {
nodeStr = lib.ns + ':' + e;
el.vml[v][e] = document.createElement(nodeStr);
}
}
el.vml[v].shape.stroked = false;
el.vml[v].shape.appendChild(el.vml[v].fill);
el.parentNode.insertBefore(el.vml[v].shape, el);
}
}
el.vml.image.shape.fillcolor = 'none'; /* Don't show blank white shapeangle when waiting for image to load. */
el.vml.image.fill.type = 'tile'; /* Makes image show up. */
el.vml.color.fill.on = false; /* Actually going to apply vml element's style.backgroundColor, so hide the whiteness. */
lib.attachHandlers(el);
lib.giveLayout(el);
lib.giveLayout(el.offsetParent);
el.vmlInitiated = true;
lib.applyVML(el); /* Render! */
}
};
try {
document.execCommand("BackgroundImageCache", false, true); /* TredoSoft Multiple IE doesn't like this, so try{} it */
} catch(r) {}
DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();

第三种方法:利用滤镜(需要注意的是,background和*html中src里边图片的路径必须是绝对的url,而且class名不可以有包含样式,如ul li.class{}这样的写法是不行的。)

.imgbg{position:absolute;left:0;top:0;background:url(http://icon.cnmo-img.com.cn/app/ie6_img_app_11.png) no-repeat;width:60px;height:60px;z-index:1;zoom:1;cursor:pointer;}

*html .imgbg{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src='http://icon.cnmo-img.com.cn/app/ie6_img_app_11.png');}

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage