html⼿机和电脑⼀致,浏览器兼容性(⼿机、电脑。js、html、
css)
浏览器兼容性问题
浏览器兼容性问题⼜被称为⽹页兼容性或⽹站兼容性问题,指⽹页在各种浏览器上的显⽰效果可能不⼀致⽽产⽣浏览器和⽹页间的兼容问题浏览器兼容的重要性:
⽹站做好了浏览器兼容,能够让⽹站在不同的浏览器下都正常显⽰
浏览器兼容能够抓住更多的⽹站访客
浏览器兼容能够给客户更好的体验
CSS Bug、CSS Hack和Filter
IE6常见CSS解析Bug及hack(解决⽅法)
1)样式在各浏览器中解析不⼀致的情况,或者说CSS样式在浏览器中不能正确显⽰的问题称为CSS bug.
2)CSS Hack: CSS中,Hack是指⼀种兼容CSS在不同浏览器中正确显⽰的技巧⽅法,修补bug的⽅法
3)Filter:表⽰过滤器的意思,它是⼀种对特定的浏览器或浏览器组显⽰或隐藏规则或声明的⽅法。本质上讲,Filter是hack⽅法中的⼀种;
1)默认⾼度(IE6)
描述:在IE6及以下版本中,部分块元素拥有默认⾼度(低于18px⾼度)
hack1:给元素添加声明:font-size:0;
hack2:给元素添加声明:overflow:hidden;
2)图⽚间隙
div中的图⽚间隙
bug:在块元素中插⼊图⽚时,有时图⽚会将块元素下⽅撑⼤三像素。
Hack:给
添加声明:display:block;
双倍浮向(双倍边距)
描述:当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边的边界加倍显⽰。
hack:给浮动元素添加声明:display:inline;
4)表单元素⾏⾼不⼀致(IE,MOZ,C,O,S)
bug:表单元素⾏⾼对齐⽅式不⼀致
hack:给表单元素添加声明:float:left;
5)按钮元素默认⼤⼩及样式不⼀ 致
hack1: 统⼀⼤⼩及样式/(⽤a标记模拟)
hack2:input外边套⼀个标签,在这个标签⾥写按钮的样式,把input的边框去掉。
hack3:如果这个按钮是⼀个图⽚,直接把图⽚作为按钮的背景图即可。
6)百分⽐bug
描述:在IE6及以下版本中在解析百分⽐时,会按四舍五⼊⽅式计算从⽽导致50%加50%⼤于100%的情况。hack:给右⾯的浮动元素添加声明:clear:right; 意思:清除右浮动。
clear:left:清除左浮动
clear:both:清除两边的浮动
7)⿏标指针bug
描述:cursor属性的hand属性值只有IE8浏览器识别;
hack:如统⼀某元素⿏标指针形状为⼿型,应添加声明:cursor:pointer;
auto默认
crosshair加号
text⽂本
wait等待
help帮助
progress过程
inherit继承
move移动
ne-resize向上或向右移动
pointer⼿形
8)透明属性
IE浏览器写法:filter:alpha(opacity=数值);取值范围 1-100(IE8以下)
兼容其他浏览器写法:opacity:数值;(数值的取值范围0-1,0.1,0.2,0.3-----0.9)
9)当li⾥的A加display:block或float:left时,出现⾏⾼不⼀致,有的会多出3像素;
hack1:给a加display:inline-block;
hack2:给a加display:inline;
Hack3:给li加float,并加宽度
10)当li加float属性,并且li⾥的A转换成块元素,并给a加了⾼度时,IE6⾥会出现每个LI单独占⼀⾏或阶梯状的情况;hack1:不给a标签加⾼度;
Hack2:给a标签也添加float;
11)⽗元素⾥有块元素,如果给⼦元素添加添加margin-top,⽗元素会下来。Hack1:给⽗元素添加overflow:hidden;
Hack2:给⼦元素添加float;
Hack3:给⽗元素加边框;
或者⽤其他的⽅法达到我们想要的效果:如给⽗元素加padding-top. javascript :
html和css书籍推荐HTML对象获取问题
FireFox:ElementById(“idName”);
ie:document.idname或者ElementById(“idName”).
解决办法:统⼀使⽤ElementById(“idName”);
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论