前端兼容性

1.使用clearfix类清除浮动;在需要清除浮动的位置引入该类。

.clearfix{
        display: block;
        zoom:1;                
}
.clearfix:after,.clearfix:before{/*设定一个为空的元素,用来清除元素之间的浮动,这个只能作用于对大多数符合标准的浏览器;*/
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}
* html .clearfix{height:1%;/*这是为了触发IEhaslayout*/}
.clearfix{display:block;}

2.IE6下的3像素;

有时候吧,这个IE6会莫名其妙的多出来这个几像素,这是个非常讨厌的事情,毕竟咱们精精确确算的布局到这他这里变得有点惨不忍睹!

不过使用_margin-right:-3px;就可以咯

3.IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白

添加:zoom:1;
        设置UL 的width

4.IE低版本PNG图片不透明解决方案;

小可比较懒散,所以这个PNG透明的问题还是比较喜欢使用JS来做处理的;这些JS 在网上有很多的DEMO,大家可以找找看,小可比较喜欢使用这个DD_belatedPNG.js实现。
具体的引入方式是:

<!--[if IE 6]>
                <script src="css/DD_belatedPNG_0.0.8a.js" mce_src="css/DD_belatedPNG_0.0.8a.js"></script>
                <script type="text/javascript">DD_belatedPNG.fix(‘*‘);</script>
        <![endif]-->

5.img引入图片之后会有几像素的空白间隙

可添加 img{display:block;}

6.如何设置鼠标在所有浏览器中均显示手的形状

.p{cursor:pointer;}

7.实现已知高宽元素垂直居中;

#div{
                position:relative;
                width:400px;
                height:400px;
                border:1px solid #f00;
                top:50%;
                left:50%;
                margin-left:-200px;
                margin-top:-200px;
        }

8.内联元素 span 高宽设置;
        span{
                display:block;
                width:200px;
                height:35px;
        }

9.超链接保留有虚线框;
        a{
                outline:none;
        }

http://i.cnblogs.com/EditPosts.aspx?opt=1.wraper{width:200px;height:200px;background:#f00;filter:alpha(opacity=50);opacity:.5;}
.content{width:200px;height:200px;margin-top:-200px;}
<div class="wraper"></div>
<div class="content"> </div>

11.设置元素横向居中;
        #div{
        width:980px;
        margin:0px auto;
        }

12.文字垂直居中、首行缩进;
        #lh20{
        height:20px;
        line-height:20px;
        text-indent:1em;       
}

13.设置浮动之后IE出现双倍间距;
        #div{
                float:left;
                display:inline;
        }

转载原文:http://www.w3cfuns.com/blog-5461894-5403930.html

10.设置元素透明度之后,元素内的内容也会随之变成透明状态;

时间: 2024-08-09 00:54:55

前端兼容性的相关文章

前端兼容性探讨

这里和朋友们简单探讨一下个人对于前端兼容性的一些理解: 在项目中,前端主要处理html,css,javaScript代码,当然还有可能接触到razor等渲染引擎方面的知识,不过主要处理的还是HTML.CSS.JavaScript.个人认为兼容性的问题也是对这三个方面进行处理. 首先,是html方面兼容性的处理,大家都知道,虽然有一个W3c标准的存在去规范html.xml/xhtml/css/javaScript/dom的标准,但是这只是个标准,真正体现出效果的是浏览器,而浏览器却有很多种,fir

web前端 兼容性问题

1:position属性使用过多或使用位置不恰当引起滚动时页面错乱 浏览器环境:ie7 position:relative; 网页上最直接表现就是极具破坏性的滚动错位,问题产生来自ie7自身渲染解析出错:这个问题的解决方案没有具体的代码,尽量避免在过多层级中使用该属性,绝对禁止为无需要无作用元素添加该属性,如tr.td等 2: 跨浏览器的CSS透明度 .transparent { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microso

前端兼容性问题

IE6IE7Firefox浏览器不兼容原因及解决办法 一.IE6IE7Firefox浏览器不兼容原因及解决办法1.文字 本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,opera下就更不一样了.解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值.这点很重要,在高度上我们不能容忍1px 的差异.2.ff 下容器高

前端兼容性的解决思路及技巧

前端知识总结本内容只针对Pc端,未来会添加移动端的兼容问题总结1.尽量使用margin,padding等边框属性代替相对定位.决定定位等属性2.在使用position的时候,可以在父元素上添加relative属性,可以避免很多意外的效果,(如果考虑到兼容Ie6,就不能使用或者尽量少使用绝对定位混合相对定位,因为两者混合使用在ie6下会产生非常奇特的现象).3.对于某个元素内,元素出现错乱的情况,可以overflow清除浮动影响.4.在Ie6下,overflow在特定情况下无效果,因此如果出现错乱

web前端兼容性

不同的浏览器兼容性不同 IE的内核为 Trident (但是IE10以后改为了edg内核),js引擎为JScriptjs引擎 火狐的内核为 Gecko,js引擎为TraceMonkey 欧鹏的内核为Presto(已被放弃),js引擎为Carakan Safri和谷歌的内核为 Webkit,js引擎为 SquirrelFish/v8 不同的浏览器兼容性不同 IE的内核为 Trident (但是IE10以后改为了edg内核),js引擎为JScriptjs引擎 火狐的内核为 Gecko,js引擎为Tr

web前端兼容性问题总结

1.   HTML对象获取问题 FireFox:document.getElementById("idName");ie:document.idname或者document.getElementById("idName").解决办法:统一使用document.getElementById("idName"); 2.    const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常

移动前端兼容性笔记 - 安卓2.x 自带原生浏览器箭头问题

这样的箭头用CSS-3实现,整段代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/

梦游前端,JavaScript兼容性

前端兼容问题出现的原因 何为操作系统?操作系统(Operating System)是管理和控制计算机硬件与软件资源的计算机程序.是的,任何的应用软件必须在操作系统的支持下运行. 大家会疑问?为什么我要讲操作系统?你猜! 其实,我只想表述我自己的一个观点,“Web浏览器是Web应用的操作系统”.这句话来源于JavaScript权威指南. 正因为Web浏览器(IE.Mozilla.Apple.Google.360浏览器.QQ浏览器)的多样性,才出现了所谓的兼容性问题. 编写一个JavaScript程

前端资源汇总[转载]

JavaScript 框架/库 Animations vivus:可以动态描绘 SVG 的 JS 库, 支持多种动画 Web Animation:Javascript 实现的 Web Animation API scrollReveal.js:使元素以非常酷帅的方式进入画布 (Viewpoint) snabbt.js:一个利用 Javascript 和 CSS transform 的 animation 库 matter-js:2D 物理效果引擎,碰撞.弹跳等 parallax:一个用于响应智能