Sorting out css compatibility issues_html/css_WEB-ITnose

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。

文字

, Unfortunately, the single line text line-height effect disappears under IE6. . . , the reason is that this inline-block element and the inline element are written together. Solution: Make both img and text float.

11 The hover status of the link. a:hover img{width:300px} We want the width of the image contained in the link to change when the mouse hovers. Unfortunately, it is invalid under ie6 and valid under ie7 and ff.

Hover status of 12 links. div:hover{} This style is not recognized by IE6 and will only work under IE7 and FF.

13blocked a link, with an absolute layer inside, and an img placed inside the absolute layer. Under ie, clicking the img with the mouse will not have a link effect, but it will be normal under ff.

14 float that cannot be completely cleared. Solution: Add zoom:1 to the ul attribute (it is useless to add zoom:1 to li)

15ie under overflow:hidden, the absolute layer position:absolute or the relative layer position:relative is invalid. Solution: Add position:relative or position:absolute to overflow:hidden. In addition, ie6 supports overflow-x or overflow-y features, but ie7 and ff do not support it.

16. There is a serious bug under IE6. If the float element has no width defined, and if there is a div inside that defines height or zoom: 1, the div will fill the entire row, even if you give it a width. If the float element is used as a layout or complex container, it must be given a width.

17． A bug under IE6, an absolutely positioned div contains a relatively positioned div. If the height of the relatively positioned div in the inner layer is given a specific value, the relative layer in the inner layer will have a width value of 100%, and the absolute layer in the outer layer will be stretched. The solution is to give the inner layer a float attribute to the relative layer.

18. Bug under IE, when there is in

, the text in the float layer under the position: relative layer cannot be selected. This bug forced me to fix the common style library.

19. Disadvantages of ff. width:100% is very convenient to use in IE. It will search for the width value layer by layer, ignoring the influence of the floating layer. It will search to the end of the floating layer under ff. In this way, you can only add width: 100% to all floating layers in the middle. , Tired.

20． Problem with iE6. When the height of the layer is less than 20px, font-size must be defined under IE6: 0px; otherwise the height is 20px;

21. Under ff, only body and html define height:100% at the same time, and the height is 100%. Under IE, you only need to define body.

22. Vertical centering problem of div:

vertical-align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert text and it will be vertically centered. The disadvantage is that the content must be controlled without line breaks.

23. IE hide-and-seek problem

When the div application is complex and there are some links in each column, the hide-and-seek problem of DIV is likely to occur at this time.

Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page. Solution: Use the line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.

24． According to web standards, IE cannot set the scroll bar color

The solution is to replace the body with html

25. The border and background of the link (a tag)

A link adds a border and background color, and needs to set display: block,

26. The ul tag has a padding value by default in ff. In IE, only margin has a value

So defining ul{margin:0;padding:0;} first can solve most problems

27.ff: div set margin-left, When margin-right is auto, it is already centered, but IE does not work

ff: When body is set to text-align, div needs to set margin: auto (mainly margin-left, margin-right) before it can be centered

28. The picture is in the center and the text is on the left.

.abc{ text-align:left }

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

29. Layer vertical Centered style:

div{

position:absolute;

top:50%;

left:50%;

margin:-117px 0 0 -187px;

width:374px;

height:234px;

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

}

30.form will have an extra line at the bottom in IE6, plus style="max-width:90%"

32. Empty td displays border table { border-collapse:collapse; }

33. Change the image when the mouse passes over it

function imagechange(img)

{

document.images[0].src=img;

document.images[0].width=400;

document.images[0].height=300;

}

 

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. Double margin BUG in IE6
After floating, the original margin is 10px, but IE interprets it as 20px. The solution is to add

1. display: inline

41. The text in the absolutely positioned container cannot be selected normally under IE6
This problem exists in IE6 and 7. The solution to the problem is to let IE enter qurks mode. For relevant knowledge about qurks mode, please refer to:
http://www.microsoft.com/..

42. There is a gap below the picture under IE6
There are many ways to solve this BUG , it can be solved by changing the layout of html, or setting img to display:block
or setting the vertical-align attribute to vertical-align:top bottom middle text-bottom.

43. IE6 two There is a gap between the layers
This 3PX BUG of IE also often occurs. The solution is to float .right similarly float:left or define .left margin-right:-3px relative to IE6;

44. List-style-image cannot be positioned accurately
The positioning problem of list-style-image is also often asked. The solution is generally to use the background simulation of li. Here, the relative positioning method can also be used to solve the problem.

45. Method to display ellipsis after the content in LI exceeds the length
This method is suitable for IE and OP browsers

1.

6.   text-overflow:ellipsis;  

7.   —-o-text-overflow:ellipsis; .                                                                                                                                           Is there a difference?

1. Duplication of IDs is not allowed in web standards. For example, div id="aa" is not allowed to be repeated twice, while class defines a class, which can theoretically be repeated infinitely. This requires multiple references to the definition. Then you can use it.

2. Priority issue of attributes

ID has a higher priority than class, see the example above

3. It is convenient for client scripts such as JS. If you want to specify something in the page If you want to perform script operations on an object, you can define an ID for it. Otherwise, you can only find it by traversing the page elements and specifying specific attributes. This is a relative waste of time and resources, and is far less simple than an ID.

47. How to vertically center text

Set the element height and line height to be consistent.

1.

48. How to align text and text input box
plus vertical-align:middle;

1.

5. Height:30px;

6. border:1px solid red;

7. vertical-align:middle; 🎜>9. -->

10.

49. FF cannot be horizontally centered.

Just set the left and right outer patches of the container to auto below FF.

1.  

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.

The ul with a background color set in IE is not displayed. This is a haslayout problem. There are many solutions available at http://www. satzansatz.de/cssd/onhavinglayout.htm
One of the solutions:

1.

56. How to make the layer display in FLASH

The solution is to set transparency for FLASH

1.

57 . How to vertically center a layer in the browser

Here we use percentage absolute positioning and patch negative values. The size of the negative value is its own width and height divided by two

1. < ;style type="text/css">                                                                                                              ​​​
8.         width: 200px ; ; >12.--> 

13.

58. The image is vertical and inside the container

1. css">

3.  

28. 

29.

 

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. How to make the background of IE-compatible picture transparent:

The first method: define the image format as png8, set it accurately, and dither 100%

The second method Method: Use js (the js source code is as follows, but it is not recommended for pages with too many pictures)

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');}