css兼容性问题的整理

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 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

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

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

10去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个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，<head></head>内有<base target=”_blank”/>的情况下，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="padding:0; margin:0;"

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;

}

</script>

</head>

<body>

</body>

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="margin-bottom:-3px" 这样文字和图片就居中了

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

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

1. <style type="text/css">

2. <!--

3. a:link {}

4. a:visited {}

5. a:hover {}

6. a:active {}

7. -->

8. </style>

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

1. <style type="text/css">

2. <!--

3. div {

4. width:300px;

5. word-wrap:break-word;

6. border:1px solid red;

7. }

8. -->

9. </style>

10.<div id="ff">这里是文字</div>

Js代码

1. <scrīpt type="text/javascrīpt">

2. /* <![CDATA[ */

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. </script>

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的样式，如下：

</div>

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. <style type="text/css">

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.</style>

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

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

1. <style type="text/css">

2. <!--

3. div{

4. height:30px;

5. line-height:30px;

6. border:1px solid red

7. }

8. -->

9. </style>

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

1. <style type="text/css">

2. <!--

3. input {

4. width:200px;

5. height:30px;

6. border:1px solid red;

7. vertical-align:middle;

8. }

9. -->

10.</style>

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

1. <style type="text/css">

2. <!--

3. div{

4. margin:0 auto;

5. }

6. -->

7. </style>

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. <?xml version="1.0" encoding="gb2312"?>

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

3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

4. <style type="text/css">

5. <!--

6. div{

7. cursor:pointer;

8. width:200px;

9. height:200px;

10. border:10px solid red

11. }

12. -->

13. </style>

14.<div onclick="alert(this.offsetWidth)">web标准常见问题大全</div>

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

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

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

2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

3. <style type="text/css">

4. <!--

5. html {

6. scrollbar-face-color:#f6f6f6;

7. scrollbar-highlight-color:#fff;

8. scrollbar-shadow-color:#eeeeee;

9. scrollbar-3dlight-color:#eeeeee;

10. scrollbar-arrow-color:#000;

11. scrollbar-track-color:#fff;

12. scrollbar-darkshadow-color:#fff;

13. }

14.-->

15.</style>

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

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

2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

3. <style type="text/css">

4. <!--

5. #aa ul li {

6. color:red

7. }

8. .aa {

9. color:blue

10. }

11. -->

12.</style>

13.<div id="aa">

14.<ul>

15.<li class="aa">

16. web标准常见问题大全

17.</li>

18.</ul>

19.</div>

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

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

55. 背景颜色无法显示

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

2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

3. <style type="text/css">

4. <!--

5. ul {

6. background:red

7. }

8. li {

9. float:left;

10. width:180px;

11. }

12.-->

13.</style>

14.<!--[if lte IE 6]>

15.<style>

16..gainlayout { height: 1px; }

17.</style>

18.<![endif]-->

19.<ul class="gainlayout">

20.<li>web标准常见问题大全</li>

21.<li>web标准常见问题大全</li>

22.<li>web标准常见问题大全</li>

23.<li>web标准常见问题大全</li>

24.<li>web标准常见问题大全</li>

25.<div style="clear:both"></div>

26.</ul>

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

1. <!--[if lte IE 6]>

2. <style>

3. .gainlayout { height: 1px; }

4. </style>

5. <![endif]-->

6. <!--[if lte IE 6]>

7. <style>

8. .gainlayout { height: 1px; }

9. </style>

10.<![endif]-->

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

1. <param name="wmode" value="transparent" />

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

1. <style type="text/css">

2. <!--

3. div {

4. position:absolute;

5. top:50%;

6. left:50%;

7. margin:-100px 0 0 -100px;

8. width:200px;

9. height:200px;

10. border:1px solid red;

11. }

12.-->

13.</style>

58. 图片垂直与容器内

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

2. <style type="text/css">

3. <!--

4. * {margin:0;padding:0}

5. div {

6. width:500px;

7. height:500px;

8. border:1px solid #ccc;

9. overflow:hidden;

10. position:relative;

11. display:table-cell;

12. text-align:center;

13. vertical-align:middle

14. }

15.div p {

16. position:static;

17. +position:absolute;

18. top:50%

19. }

20.img {

21. position:static;

22. +position:relative;

23. top:-50%;left:-50%;

24. width:276px;

25. height:110px

26. }

27.-->

28.</style>

29.<div><p><img src="logo.gif" /></p></div>

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

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

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

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

2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

3. <style type="text/css">

4. <!--

5. div {

6. float:left;

7. width:200px;

8. height:200px;

9. border:1px solid red

10. }

11.-->

12.</style>

13.<div>web标准常见问题大全</div>

14.<div>web标准常见问题大全</div>

15.<div>web标准常见问题大全</div>

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

1. <div style="background-color:#FF0000;">

2. <div style="float:left; height:200px">Jmedia Design</div>

3. <div style="float:right; height:800px">www.jmedia.cn</div>

4. <div style="clear:both"></div>

5. </div>

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

1. <div style="overflow:auto;">

2. <div style="float:left; background-color:#000000;height:200px">1111111111</div>

3. <div style="float:right;background-color:#000000; height:300px"">2222222222</div>

4. </div>

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

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

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

/* 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<selectors.length; 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();

</script>

第三种方法：利用滤镜(需要注意的是，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');}

标签: css使用、浏览器兼容

css兼容性问题的整理的更多相关文章

css 兼容性问题，整理
css 兼容性问题,整理: css 兼容性问题说明 <input type="number"> 在chrome下,是不能输入非数字的字符的:但是在火狐63.0.3(2 ...
IE和Firefox浏览器CSS兼容性技巧整理
转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...
CSS常见布局问题整理
实现div的水平居中和垂直居中多元素水平居中实现栅格化布局 1. 实现div的水平居中和垂直居中实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来主要思路其实就是 ...
浏览器对DIV+CSS兼容性问题大总结
浏览器对DIV+CSS兼容性问题大总结接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...
CSS兼容性详解
前面的话对于前端工程师来说,不想面对又不得不面对的一个问题就是兼容性.在几年之前,处理兼容性,一般地就是处理IE低版本浏览器的兼容性.而近几年,随着移动端的发展,工程师也需要注意手机兼容性了.本文将 ...
CSS 兼容性支持
CSS 兼容性支持在一个CSS属性还没有成为标准之前,各浏览器厂商已经做了这个属性的实现,可能各浏览器实现不尽相同,所以加入属性前缀区分. safari , chrome:-webkit- oper ...
解决css兼容性
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
HTML&CSS兼容性总结
对目前所遇见的兼容性笔记进行整理分类: 不兼容浏览器问题概要问题描述解决方法 IE6,IE7 3px 并列一行的元素左侧第一个元素没浮动,第二个元素左浮动,则两个元素之间会多3像素空隙并在一 ...
新入门的小白，整理一下特别简单实用的div+css兼容性的问题。
最近整理了一下特别简单的div+css的不同浏览器的兼容性的问题,跟大家分享一下,只适合刚入门的新手,欢迎大牛们给提出意见. 1. 默认的内外边距不同问题: 各个浏览器默认的内外边距不同解决: * ...

随机推荐

【百度地图API】暑假放假回老家——城市切换功能
原文:[百度地图API]暑假放假回老家--城市切换功能任务描述: 酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢.现在百度地图API上不能直接切换城市,怎么办呢? 如何实现: 利用API先搜索到要去城 ...
E: 无法获取锁 /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)解决方法
/********************************************************************* * Author : Samson * Date ...
Access to the temp directory is denied. Identity 'NT AUTHORITY\NETWORK SERVICE' under which XmlSerializer is running does not have sufficient permiss
造成错误的原因是用bat代码清理系统垃圾时造成的权限丢失而引起的错误描述 1.An error occurred creating the configuration section handler ...
SSAS系列——【08】多维数据（程序展现Cube）
原文:SSAS系列--[08]多维数据(程序展现Cube) 1.引用DLL? 按照之前安装的MS SQLServer的步骤安装完成后,发现在新建的项目中“Add Reference”时居然找不到Mic ...
在线预览Excel
遇到的问题各种多 <system.web> <identity impersonate="true" userName="Administ ...
vs.net 2013 Saffolding功能扩展
vs.net 2013 Saffolding功能扩展 Asp.net mvc 5 CRUD代码自动生成工具 -Visual Studio.net2013 Saffolding功能扩展上次做过一个&l ...
Java对象比较器对泛型List进行排序-Demo
针对形如:字段1 字段2 字段3 字段n 1 hello 26 7891 world 89 5562 what 55 4562 the 85 452 fuck 55 995 haha 98 455 以 ...
Appium Android Bootstrap源码分析之控件AndroidElement
通过上一篇文章<Appium Android Bootstrap源码分析之简介>我们对bootstrap的定义以及其在appium和uiautomator处于一个什么样的位置有了一个初步的 ...
VC++.Net CAD编程架构
1.每个对应的菜单项的图形抽象的, 图形抽象基类, 取决于改变来自子(如矩形.椭圆形) 2.在Doc对象管理列表管理,图形对象,当图形需要重绘或序列存储,通过遍历该列表的对象可以是 3. 每个类的职责 ...
ActiveReports 9实战教程（1）：手把手搭建环境Visual Studio 2013 社区版
原文:ActiveReports 9实战教程(1): 手把手搭建环境Visual Studio 2013 社区版 ActiveReports 9刚刚发布3天,微软就发布了 Visual Studio ...

css兼容性问题的整理

css兼容性问题的整理

css兼容性问题的整理的更多相关文章

随机推荐

热门专题