兼容性基本问题.docx
- 文档编号：24861230
- 上传时间：2023-06-02
- 格式：DOCX
- 页数：24
- 大小：28.27KB
兼容性基本问题.docx
《兼容性基本问题.docx》由会员分享，可在线阅读，更多相关《兼容性基本问题.docx（24页珍藏版）》请在冰豆网上搜索。
兼容性基本问题
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">
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代码
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优化前）
《包装概论》课后习题汇总.docx
