兼容性基本问题.docx

1、兼容性基本问题1.在ie6下透明的png图片会带一个背景色解决：background-image: url(icon_home.png);background-repeat: no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=icon_home.png);_background-image: none;2.div中的ul或li设置float以后，都不在div中解决：必须在ul标签后加来闭合外层div3.点击超链接后，hover、active样式没有效果解决：改变CSS属性的排列顺序: L-V-H-A

2、 4. 想让层的内容显示在flash上解决：把FLASH设置透明1、2、5. ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题例float:left;width:100px;margin:0 100px;解决：设置display:inline;6.IE6 width为奇数，右边多出1px的问题,父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素解决：将宽度的奇数值改成偶数7.table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度解决：设置line-height和height一样。在ie

3、中如果td中的没有内容，那么border将不会显示8.div中显示文本，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。解决：设置p的margin:0px，再设置div的padding-top和padding-bottom9. 块元素中含有图片时，ie6-7中会出现图片下有空隙解决： 1、在源代码中让和在同一行2、将图片转换为块级对象display:block;3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： ov

4、erflow:hidden;5、设置图片的浮动属性 float:left;10. 在我们用代码实现效果的时候会遇到下拉导航的效果，实现效果有很多种效果，在这里我们使用css和javascript实现咱们的下拉菜单效果解决：html代码 传智播客网页设计学院 网页设计 平面设计 UI设计 flash广告设计 JS代码function change(id,mode)document.getElementById(id).style.display=mode;css代码#navwidth:440px;height:24px;background:#ccc;margin:100px auto 0;#n

5、av liwidth:150px;height:24px;line-height:24px;float:left;margin-right:10px;background:yellow;text-align:center;cursor:pointer; position:relative;_display:inline;#nav li ulposition:absolute;top:24px;left:0;display:none;#nav li:hover uldisplay:block;11. input在各个浏览器的差异及解决解决：比如:下面代码: 用户名: 密码: 如果没有给CSS样式

6、这段代码在各个浏览器中的效果差不多,但是从整体看不美观的,因此要加上CSS样式,比如(为了效果加个背景色,去掉所有默认内外边距) body,form,div,label,input,ppadding:0;margin:0; bodybackground:#666;font-size:14px; .textStyleheight:20px;width:200px;border:1pxsolid red;加上此样式后,在各个浏览器中文本框与文本框之间,文本框与按钮之间的距离各不相同,按照正常情况它们各个之间是没有间距的,可是IE各个版本都有1到2个像素的间隔.去掉border效果跟明显.borde

7、r:none;而且在文本框中输入内容时,如果高度给的高了IE各个版本的浏览器中光标是左上角对齐的,而像”用户名:”密码:”这些文字的对齐方式也是不一样的.解决方法如下:如果想给文本框高度,建议用padding设置:比如padding:10px 0;此时光标焦点垂直是居中的而文本框外的文字则需设置行高和文本框的高度一样.解决框与框,框与按钮之间的问题,用浮动float 修改后的代码如下: body,form,div,label,input,ppadding:0;margin:0; bodybackground:#666;font-size:14px; .textStylepadding:20px

8、0;width:200px;border:none;float:left;border:1px solid red; .btnStylefloat:left; pclear:both; labelfloat:left;clear:both;使用浮动会造成它们会乱行,但是它们之间会没有间距,因此要用clear:both:清除浮动影响,给他们换行.12. 网页上会遇到很多导航条下拉效果解决：javascript部分代码可以简化下面咱们看看他们格式什么样的！css部分divwidth:100px; padding:10px; background:#f00; line-height:1em; tex

9、t-align:center; float:left;margin-left:20px;ullist-style:none; display:none;ul liline-height:30px; width:100px; height:30x; margin-top:5px; background:#FF0;javascript部分（没有简化） function show(id) document.getElementById(id).style.display=block function ykai(id) document.getElementById(id).style.display

10、=nonejavascript部分（简化） function show(id,moue) document.getElementById(id).style.display=moue; html部分(javascript优化前) 活动内容 活动1 活动1 活动1 活动1 活动1 活动内容 活动1 活动1 活动1 活动1 活动1 活动内容 活动1 活动1 活动1 活动1 活动1 html部分(javascript优化后) 活动内容 活动1 活动1 活动1 活动1 活动1 活动内容 活动1 活动1 活动1 活动1 活动1 活动内容 活动1 活动1 活动1 活动1 活动1 13. 使IE6下PNG背

11、景透明的七种方法任你选解决：IE6下PNG背景透明的解决办法.pngImg background:url(image.png); _background:url(image.gif);一Microsoft 的专有滤镜有时候我们会用半透明png格式的图片做为背景图，来达到一定的设计和视觉效果，但在IE6下是不支持透明png图片的。可以用到Microsoft 的专有滤镜如下：.classfilter: progidXImageTransformMicrosoft.AlphaImageLoader(enabled=true, src=images/bg.png);background:none; 由

12、于对web 标准支持较好的Firefox等浏览器不识别progidXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=images/bg.png，而Firefox是支持透明png的，所以css样式需要这样写：.classwidth:100%; filter: progidXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=images/bg.png); background:none;但要解决背景上浮文字链接时还需要再次处理：比如：CSS STYLE:#m

13、enufilter:progid:dximagetransform.microsoft.alphaimageloader(src=index.files/menu_bg.png, sizingmethod=scale);链接即可解决！注意上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语法，只有IE6识别。因此，其他浏览器会调用PNG，而IE6刚调用GIF。二.滤镜filter解决IE6下背景灰background:url(a.png) repeat-x 0 0; _background:none; _filter:progidXImageTransform.Microso

14、ft.AlphaImageLoader(src=a.png ,sizingMethod=crop);上面的原理是其他调用PNG，IE6,则先设背景没有，然后调用滤镜使之显示PNG图片。缺陷：IE6下背景无法平铺，这个问题很严重。同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。解决IE下的链接无效可用最后面的方法：三.利用JS解

15、决html中的img(插入在网页中的png图像)png背景灰问题页面中插入一段js即可。原理同上，只是将img标签用标签替换掉，并且通过滤镜设置该标签的background。它会将所有插入的PNG都如此处理。function correctPNG()for(var i=0; idocument.images.length; i+)var img = document.images;var imgName = img.src.toUpperCase();if (imgName.substring(imgName.length-3, imgName.length) = NG)var imgID =

16、 (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) i

17、mgStyle = float:right; + imgStyle;if (img.parentElement.href) imgStyle = cursor:hand; + imgStyle;var strNewHTML = ;img.outerHTML = strNewHTML;i = i-1;window.attachEvent(onload, correctPNG); ?此方法来自： 此方法基于Winodws平台，在Linux下不支持htc,没有验证过，但有网友发文证实。以下片段添加至css文件NG背景图片 详细的应用方法这里就不介绍啦。在逼不得已且身不由己必须使用PNG的情况下，这种

18、方法应该是比较优秀的，虽然不能完美的解决IE6的平铺，但是至少是实现了拉伸，使得很多情况下可以代替平铺来使用。当然效率的问题任然是存在五.让“块”透明的方法.div FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;测试IE6,IE7,IE8,FF2,FF3均通过。提示：IE6,IE7需设置一个宽度(100%也行)，否则看不到效果。六.DD_belatedPNG,解决IE6不支持PNG绝佳方案整 个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e xpression,再到javascript+透明

19、GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与 background-repeat.而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及.看Demo: 原理这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.使用方法1.在这里下载DD_belatedPNG.js文件.2.在网页中引用,如下: DD_bela

20、tedPNG.fix(.png_bg); 3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.使用a:hover请留意5-25 更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码: DD_belatedPNG.fix(.trans,.box a:hover); 七.通过 javascript 和 css 滤镜解决 IE 整站 pn

21、g 背景透明问题 function enablePngImages() var imgArr = document.getElementsByTagName_r(IMG); for(i=0; iimgArr.length; i+) if(imgArr.src.toLowerCase().lastIndexOf(.png) != -1) imgArr.style.filter = progidXImageTransform.Microsoft.AlphaImageLoader(src= + imgArr.src + , sizingMethod=auto); imgArr.src = space

22、r.gif; if(imgArr.currentStyle.backgroundImage.lastIndexOf(.png) != -1) var img = imgArr.currentStyle.backgroundImage.substring(5,imgArr.currentStyle.backgroundImage.length-2); imgArr.style.filter = progidXImageTransform.Microsoft.AlphaImageLoader(src=+img+, sizingMethod=crop); imgArr.style.backgroundImage = url(spacer.gif); function enableBgPngImages(bgElements) for(i=0; ibgElements.length; i+) if(bgElements.currentStyle.backgroundImage.lastIndexOf(.png) != -1) /alert(bgElements); var img =