开发者社区> 云服务器~建站> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

常见的浏览器兼容性问题总结

简介:
+关注继续查看


1. 不同浏览器的标签默认外补丁margin和内补丁padding不同


发生概率:100%


解决方案:使用CSS通配符*,设置内外补丁为0


*{ margin: 0; padding: 0;}


2. 块属性标签float之后,又有横向的margin值,在IE6中显示会比设置的大(IE6双边距bug)


发生概率:90%


解决方案:在float标签样式控制中加入display:inline;


 


3. 设置较小的高度标签(一般小于10px),在IE6,IE7,遨游中超出自己设置的高度


发生概率:60%


解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。


4. 行内标签设置display:block;后又采用float布局,再设置横向margin值时,在IE6中显示会比设置的大(IE6双边距bug)


发生概率:20%


解决方案:在display:block;后面加上display:inline;display:table;


5. 图片默认有间距


发生概率:20%


解决方案:使用float为img布局


6. 标签最低高度设置min-height不兼容


发生概率:5%


解决方案:例如要设置一个标签的最小高度为200px


{ min-height: 200px;


height: auto!important;


height: 200px;


overflow: visible;}


7. 透明度兼容设置


发生概率:主要看你要写的东西设不设透明度


解决方案:一句话


transparent_class {


filter:alpha(opacity=50);


-moz-opacity:0.5;


-khtml-opacity: 0.5;


opacity: 0.5;


}


opacity:0.5; This is the “most important” one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they don’t.


filter:alpha(opacity=50); This one you need for IE.


-moz-opacity:0.5; You need this one to support way old school versions of theMozilla browsers like Netscape Navigator.


-khtml-opacity:0.5; This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrent WebKit .


8. Box Model的bug


描述:给一个元素设置了高度和宽度的同时,还为其设置margin和padding的值,会改变该元素的实际大小。


解决办法:在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。


9. IE6中的列表li楼梯状bug


描述:通常在li中的元素(比如a)设置了浮动float,但li本身不浮动。


解决办法:


ul li{float:left;}


或 ul li{display:inline;}


10.li空白间距


描述:在IE下,会增加li和li之间的垂直间距


解决办法:给li里的a显式的添加宽度或者高度


li a{width:20px;}


或者


li a{display:block;float:left;clear:left;}


或者


li {display:inline;}


li a{display:block;}


或者


在每个列表li上设置一个实线的底边,颜色和li的背景色相同


11.overflow:auto;和position:relative的碰撞


描述:此bug只出现在IE6和IE7中,有两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative;且高度大于父元素,在IE6-7中子元素不会被隐藏而是溢出。


解决方案:给父元素也设置position:relative;


12.浮动层的错位


描述:当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。


解决方案:overflow:hidden;


13.IE6克隆文本的bug


描述:若你的代码结构如下





……





很有可能在IE6网页上出现一段空白文本


解决方案:


使用条件注释


删除所有注释


在注释前面的那个浮动元素加上 display:inline;


14.IE的图片缩放


描述:图片在IE下缩放有时会影响其质量


解决方案:img{ -mg-interpolation-mode:bicubic;}


15.IE6下png图片的透明bug


描述:使用透明图片,使用png24或png32图片在IE6下面显示图片会有一层淡蓝色的背景。


解决方案:


.img{


background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');


_background:0;


_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');


}


img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}



http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />


16.透明背景bug


描述:在IE浏览器中,框架不会自动把背景设为透明


解决方案:



在iframe调用的content.html页面中设置


body{background-color: transparent;}


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
常见的浏览器兼容性问题总结
常见的浏览器兼容性问题总结
0 0
浏览器兼容问题总结
如果你的系统中安装更高级的 ie浏览器 360会调用 系统的。 否则会直接使用自己的ie8内核。
446 0
跨浏览器的placehold
<div class="markdown_views"> <p>如何实现跨浏览器的placeholder效果呢? <br> 先看下效果 <br><img src="http://img.blog.csdn.net/20150626220114244" alt="鼠标未聚焦" title=""><br><img src="http://img.blog.csdn.net/2015
1127 0
浏览器兼容问题
HTML ie中a链接失效的问题 一个a链接里面放个table,即为:a>table>tr>td>链接文字。结果不能点击。原因是:a链接中有个块元素,块元素中才是img,顺序是 a>块元素>img。
455 0
用 jquery 解决 浏览器 兼容问题
如果 网页元素都是以jquery 函数 动态生成的 而函数考虑了 浏览器兼容问题 那么新建出来的 元素所带的 css 应尽最大可能解决不同浏览器兼容问题、 不同浏览器之前的最大特性之一就是如果没有把一个元素的所有内边距,外边距等写全,只是写了其中一条的话,显示效果就会差很多,如果写全了不同浏览器之前显示效果要接近一些。
428 0
跨浏览器开发:CSS代码的金科玉律
作为Web设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的。
829 0
最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声名. CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。
1057 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载