兼容性基本问题.docx

上传人：b****3 文档编号：24861230 上传时间：2023-06-02 格式：DOCX 页数：24 大小：28.27KB

下载相关举报

第1页 / 共24页

第2页 / 共24页

第3页 / 共24页

第4页 / 共24页

第5页 / 共24页

点击查看更多>>

下载资源

资源描述

兼容性基本问题.docx

《兼容性基本问题.docx》由会员分享，可在线阅读，更多相关《兼容性基本问题.docx（24页珍藏版）》请在冰豆网上搜索。

兼容性基本问题.docx

兼容性基本问题

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标签后加

both">

来闭合外层div

3.点击超链接后，hover、active样式没有效果

解决：

改变CSS属性的排列顺序:

L-V-H-A

4.想让层的内容显示在flash上

解决：

把FLASH设置透明

1、

2、

5.ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题

例float:

left;width:

100px;margin:

0100px;

解决：

设置display:

inline;

6.IE6width为奇数，右边多出1px的问题,父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素

解决：

将宽度的奇数值改成偶数

7.table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度

解决：

设置line-height和height一样。

在ie中如果td中的没有内容，那么border将不会显示

8.div中显示

文本

，ff、oprea、Chrome：

top和bottom都会出现空白行，但是在ie下不会出现空白行。

解决：

设置p的margin:

0px，再设置div的padding-top和padding-bottom

9.块元素中含有图片时，ie6-7中会出现图片下有空隙

解决：

1、在源代码中让

和在同一行

2、将图片转换为块级对象display:

block;

3、设置图片的垂直对齐方式vertical-align:

top/middle/bottom

4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置：

overflow:

hidden;

5、设置图片的浮动属性float:

left;

10.在我们用代码实现效果的时候会遇到下拉导航的效果，实现效果有很多种效果，在这里我们使用css和javascript实现咱们的下拉菜单效果

解决：

html代码

传智播客网页设计学院

网页设计

平面设计

UI设计

flash广告设计

JS代码

functionchange（id,mode）{

document.getElementById（id）.style.display=mode;

}

css代码

#nav{width:

440px;height:

24px;background:

#ccc;margin:

100pxauto0;}

#navli{width:

150px;height:

24px;line-height:

24px;float:

left;margin-right:

10px;background:

yellow;text-align:

center;cursor:

pointer;position:

relative;_display:

inline;}

#navliul{position:

absolute;top:

24px;left:

0;display:

none;}

#navli:

hoverul{display:

block;}

11.input在各个浏览器的差异及解决

解决：

比如:

下面代码:

用户名:

密　码:

如果没有给CSS样式这段代码在各个浏览器中的效果差不多,但是从整体看不美观的,因此要加上CSS样式,比如（为了效果加个背景色,去掉所有默认内外边距）

body,form,div,label,input,p{padding:

0;margin:

0;}

body{background:

#666;font-size:

14px;}

.textStyle{height:

20px;width:

200px;border:

1pxsolidred;}

加上此样式后,在各个浏览器中文本框与文本框之间,文本框与按钮之间的距离各不相同,按照正常情况它们各个之间是没有间距的,可是IE各个版本都有1到2个像素的间隔.去掉border效果跟明显.border:

none;而且在文本框中输入内容时,如果高度给的高了IE各个版本的浏览器中光标是左上角对齐的,而像”用户名:

””密码:

”这些文字的对齐方式也是不一样的.

解决方法如下:

如果想给文本框高度,建议用padding设置:

比如padding:

10px0;此时光标焦点垂直是居中的

而文本框外的文字则需设置行高和文本框的高度一样.

解决框与框,框与按钮之间的问题,用浮动float修改后的代码如下:

body,form,div,label,input,p{padding:

0;margin:

0;}

body{background:

#666;font-size:

14px;}

.textStyle{padding:

20px0;width:

200px;border:

none;float:

left;border:

1pxsolidred;}

.btnStyle{float:

left;}

p{clear:

both;}

label{float:

left;clear:

both;}

使用浮动会造成它们会乱行,但是它们之间会没有间距,因此要用clear:

both:

清除浮动影响,给他们换行.

12.网页上会遇到很多导航条下拉效果

解决：

javascript部分代码可以简化下面咱们看看他们格式什么样的！

！

css部分

div{width:

100px;padding:

10px;background:

#f00;line-height:

1em;text-align:

center;float:

left;margin-left:

20px;}

ul{list-style:

none;display:

none;}

ulli{line-height:

30px;width:

100px;height:

30x;margin-top:

5px;background:

#FF0;}

javascript部分（没有简化）

functionshow（id）{

document.getElementById（id）.style.display="block"

}

functionykai（id）{

document.getElementById（id）.style.display="none"

}

javascript部分（简化）

functionshow（id,moue）{

document.getElementById（id）.style.display=moue;

}

html部分（javascript优化前）

活动内容

活动1

活动内容

活动1

活动内容

活动1

html部分（javascript优化后）

活动内容

活动1

活动内容

活动1

活动内容

活动1

13.使IE6下PNG背景透明的七种方法任你选

解决：

IE6下PNG背景透明的解决办法

.pngImg{background:

url（image.png）;_background:

url（image.gif）;}

一．Microsoft的专有滤镜

有时候我们会用半透明png格式的图片做为背景图，来达到一定的设计和视觉效果，但在IE6下是不支持透明png图片的。

　　可以用到Microsoft的专有滤镜如下：

　　.class{

　　　　　　filter:

progidXImageTransformMicrosoft.AlphaImageLoader（enabled=true,src="images/bg.png"）;

　　　　　　background:

none;

　　}

　　由于对web标准支持较好的Firefox等浏览器不识别"progidXImageTransform.Microsoft.AlphaImageLoader（enabled=true,src="images/bg.png"，而Firefox是支持透明png的，所以css样式需要这样写：

　　.class{

　　　　　width:

100%;filter:

progidXImageTransform.Microsoft.AlphaImageLoader（enabled=true,src="images/bg.png"）;background:

none;

}

　　但要解决背景上浮文字链接时还需要再次处理：

　　比如：

　　CSSSTYLE:

　　#menu{filter:

progid:

dximagetransform.microsoft.alphaimageloader（src='index.files/menu_bg.png',sizingmethod='scale'）;}

relative;">链接

　　即可解决！

注意上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语法，只有IE6识别。

因此，其他浏览器会调用PNG，而IE6刚调用GIF。

二.滤镜filter解决IE6下背景灰

background:

url（a.png）repeat-x00;_background:

none;_filter:

progidXImageTransform.Microsoft.AlphaImageLoader（src="a.png",sizingMethod="crop"）;

上面的原理是其他调用PNG，IE6,则先设背景没有，然后调用滤镜使之显示PNG图片。

缺陷：

IE6下背景无法平铺，这个问题很严重。

同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。

AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：

position:

relative;这样条代码，使其相对浮动。

AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。

解决IE下的链接无效可用最后面的方法：

三.利用JS解决html中的img（插入在网页中的png图像）png背景灰问题

页面中插入一段js即可。

原理同上，只是将img标签用标签替换掉，并且通过滤镜设置该标签的background。

它会将所有插入的PNG都如此处理。

--[ifIE6]>

[endif]-->?

此方法来自：

此方法基于Winodws平台，在Linux下不支持htc,没有验证过，但有网友发文证实。

以下片段添加至css文件

NG背景图片

详细的应用方法这里就不介绍啦。

在逼不得已且身不由己必须使用PNG的情况下，这种方法应该是比较优秀的，虽然不能完美的解决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特有的滤镜或是expression,再到javascript+透明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.在网页中引用,如下:

--[ifIE6]>

DD_belatedPNG.fix（'.png_bg'）;

[endif]-->

3.有2种调用函数,一种是DD_belatedPNG.fix（）,如上代码.另一种是fix（）,这中方法需要在函数内指出css选择器名.

使用a:

hover请留意

5-25更新:

如果你也像jutoy同学一样想要用透明PNG作为a:

hover时的背景图片,那么你需要留意你的代码,需要以”a:

hover”来作为选择器.否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

--[ifIE6]>

DD_belatedPNG.fix（'.trans,.boxa:

hover'）;

[endif]-->

七.通过javascript和css滤镜解决IE整站png背景透明问题

functionenablePngImages（）

{varimgArr=document.getElementsByTagName_r（"IMG"）;

for（i=0;i

if（imgArr.src.toLowerCase（）.lastIndexOf（".png"）!

=-1）

{

imgArr.style.filter="progidXImageTransform.Microsoft.AlphaImageLoader（src='"+imgArr.src+"',sizingMethod='auto'）";

imgArr.src="spacer.gif";

}

if（imgArr.currentStyle.backgroundImage.lastIndexOf（".png"）!

=-1）

{

varimg=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）";

}

functionenableBgPngImages（bgElements）

{

for（i=0;i

{

if（bgElements.currentStyle.backgroundImage.lastIndexOf（".png"）!

=-1）

{//alert（bgElements）;

varimg=

展开阅读全文