网页设计中常见的兼容性问题
来源:互联网 发布:mac下载工具推荐 编辑:程序博客网 时间:2024/06/08 17:23
常见兼容性问题
1、png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.
2、浏览器默认的margin和padding不同。解决方案是加一个全局的
*{margin:0;padding:0;}来统一。
3、IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。
5、这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别)渐进识别的方式,从总体中逐渐排除局部。
6、首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。
接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
css .bb{ background-color:red;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }
7、 IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。
8、IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
9、解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
10、 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
11、超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
IE6下常见bug及解决方法
ol内li的序号全为1,不递增。解决办法:为li设置样式display:list-item;
IE6不支持min-height,解决办法使用css hack:
.target { min-height:100px; height: auto!important; height: 100px; // IE6下内容高度超过会自动扩展高度 }
IE6在设置 height 小于 font-size 时高度值为 font-size ,解决办法: font-size: 0;
IE6不支持PNG透明背景,解决办法: IE6下使用gif图片
IE6-7不支持 display: inline-block 解决办法:设置inline并触发hasLayout
display:inline-block;display:inline; zoom: 1;
IE6下浮动元素在浮动方向上与父元素边界接触元素的外边距会加倍。解决办法: 1)使用padding控 制间距。 2)浮动元素 display: inline; 这样解决问题且无任何副作用:css标准规定浮动元素 display:inline会自动调整为block
通过为块级元素设置宽度和左右margin为auto时,IE6不能实现水平居中,解决方法:为父元素设 置 text-align: center;
IE5-8不支持 opacity ,解决办法:
.opacity{opacity:0.4filter: alpha(opacity=60); /* for IE5-7 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }
未定位父元素 overflow: auto; ,包含 position: relative; 子元素,子元素高于父元素时会溢出。 解决办法:1)子元素去掉 position: relative; ; 2)不能为子元素去掉定位时,父元素 position: relative;
<style type="text/css">.outer {width: 215px;height: 100px;border:1px solid red;overflow: auto;position:relative; /* 修复bug */ } .inner { width: 100px; height:200px; background-color: purple;</style><div class="outer"> <div class="inner"></div></div>
IE6只支持 a 标签的 :hover 伪类,解决方法:使用js为元素监听mouseenter,mouseleave事件,添加 类实现效果:
<style type="text/css"> .p:hover, .hover{background: purple; } </style><p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span>aaaa lkjlkjdf j</p><script type="text/javascript"> function addClass(elem, cls){ if(elem.className){elem.className += ' '+ cls; } else {elem.className = cls;} }function removeClass(elem, cls){var className = ' ' + elem.className + ' '; var reg = new RegExp(' +' + cls + ' ','g'); elem.className = className.replace(reg, ' ').replace(/^ +| +$/, ''); }var target = document.getElementById('target'); if (target.attachEvent) { target.attachEvent('onmouseenter', function () { addClass(target, 'hover'); }); target.attachEvent('onmouseleave', function () { removeClass(target, 'hover'); }) } </script>
- 网页设计中常见的兼容性问题
- 网页布局中的常见的兼容性问题
- 网页布局中的常见的兼容性问题
- 网页布局中的常见的兼容性问题
- 浏览器中常见的兼容性问题
- 网页设计中常见的错误
- 网页设计中最常见的9种设计风格
- 网页设计中常见的几种布局
- 常见的CSS兼容性问题。
- 常见的浏览器兼容性问题
- 常见的浏览器兼容性问题
- 常见的兼容性问题
- 常见的浏览器兼容性问题
- 常见的浏览器兼容性问题
- 浏览器常见的兼容性问题
- CSS中 常见浏览器兼容性问题
- Ajax开发中IE和Firefox的常见兼容性问题
- js 在不同浏览器中一些常见的兼容性问题
- uva 12938
- hdu6073 Matching In Multiplication
- 组件化及组件间通信
- 洛谷P2015 二叉苹果树
- Java基础07 包
- 网页设计中常见的兼容性问题
- 常见的几种排序算法
- Ubuntu,两个服务器之间 复制文件方法(还包括一些基本的数据处理的部分)
- 【问题解决】小问题记录 -- “Access denied for user 'root'@'localhost' (using password:YES)”
- Python日记8/5
- 010讲python :异常处理
- 一些查找算法 C++
- POJ-3258-River Hopscotch(二分+贪心)
- C++日志库(windows、linux)