《CSSforIE6IE7FF兼容基本方案.doc》由会员分享，可在线阅读，更多相关《CSSforIE6IE7FF兼容基本方案.doc（12页珍藏版）》请在金锄头文库上搜索。
1、CSS for IE6,IE7,FF兼容基本方案滤镜效果IE和FF方法。filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;检测表单中Radio元素function radio_value(name)var obj = document.getElementsByName(name); for(i=0;iobj.length;i+) if(obji.checked) return obji.value;选择卡JS控制代码function setTab(name,cursel,n)for(i=1;i=n;i+) var menu=docu
2、ment.getElementById(name+i); var con=document.getElementById(con_+name+_+i); menu.className=i=cursel?now:; con.style.display=i=cursel?block:none;A标签加rel=sidebar能实现FF兼容去除a button 标签点击时的虚线方法1(批量处理): CSS样式：a blr:expression(this.onFocus=this.blur()方法2(单个处理): 去掉链接上的虚线框可以在链接里面加入onfocus=this.blur();就可以去掉虚线
3、框了方法3(批量处理):写一个htc文件any.htc，和上一个html在同一个目录下： function Click() element.blur(); 再在CSS中加入如下代码:A behavior:url(any.htc); 用clear:both标签清除元素自己的浮动在IE7及以下浏览器，默认允许在自己元素的水平面上能有其它元素是浮动的。但火狐不允许该写法.火狐下或IE下要完成此布局直接设定clear标签清除其左边还是右边;target=_blank:在新窗口中浏览新的页面。 target=_self:在同一个窗口打开新的页面。 target=_parent:在父窗口中打开新的页面。（
4、页面中使用框架才有用） target=_top :以整个浏览器作为窗口显示新页面。（突破了页面框架的限制）关于IE6不支持CSS2中非a标签:hover事件的BUG可用Jqurey弥补不足$(要变的标签).hover(function() $(this).css(background-color,#eee);,function()$(this).css(background-color,#fff););border-bottom:2px solid #708089;不错的边框色网页打开3秒后跳到百度让IE8按ie7风格执行网页firefox 页面缓存失效,在需要强制页面缓存失效的页面的Head
5、节点中添加如下语句： *filter:gray;color:gray代码加入CSS将是网页内容变灰，不兼容FF 将下面代码加入之间将是Flash变灰 white-space:nowrap 标签 设置标签中文字内容不换行word-wrap:break-word 标签 设置标签中文字内容将在边界内换行text-overflow:clip | ellipsis 必须配合overflow:hidden 标签使用取值：clip： 不显示省略标记.而是简单的裁切.ellipsis： 当对象内文本溢出时显示省略标记.,此值不能用于FF. text-indent 标签FIREFOX不识别CSS for IE6
6、,IE7,FF 兼容浅见全部浏览器识别 height: 100px;IE6 识别 _height: 100px;IE7 识别 *+height: 100px;IE6/IE7 识别 *height: 100px;IE7/FF 识别 height: 100px !important;兼容代码:兼容最推荐的模式。/* FF */.submitbutton float:left;width: 40px;height: 57px;margin-top: 24px;margin-right: 12px;/* IE6 */*html .submitbutton margin-top: 21px;/* IE7
7、 */*+html .submitbutton margin-top: 21px;一般兼容写法:1, !important 随着IE7对!important的支持, !important 方法现在只针对IE7/FF的兼容代码:.wrapper width: 100px !important; /* IE7+FF */width: 80px; /* IE6 */一定要将width: 100px !important; /* IE7+FF */这句放置在另一句之上2, IE6/IE77对FF * +html 与 * html 是IE特有的标签, FF 暂不支持.而 * +html 又为IE7特有标
8、签.代码:.wrapper width:120px; /* FireFox */* html .wrapper width:80px; /* ie6 fixed */* +html .wrapper width:60px; /* ie7 fixed 写法顺序 */sp: * +html 对IE7的兼容 必须保证HTML顶部有如下声明：浮动 float 闭合可以用这个解决多个div对齐间距问题将代码加入全局CSS中,再给需要闭合的div加上 class=”clearfix” 代码:/* Clear Fix */.clearfix:after content:.;display:block;hei
9、ght:0;clear:both;visibility:hidden;.clearfix display:inline-block;/* Hide from IE Mac */.clearfix display:block;/* End hide from IE Mac */* end of clearfix */ 兼容小补贴1, FF下可用 !important; 解决给 div 设置 padding 后导致的 width 和 height 增加( IE不会).2, 居中问题. (1).水平居中.将 line-height 设置为当前 div 相同的高度. (2).垂直居中. margin:
10、 0 auto;特别状态下失效3, 若需给 a或内联标签内的内容设置样式, 设置其 display: block属性;4, FF 和 IE 对 BOX 理解的差异，导致设为 float的div在IE6下margin加倍等问题,解决方案是给div加上display:inline; . 例如： css: .floatfloat:left;margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ 有多种途径 5, 作为外部 wrapper包装 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.6, 手形光
11、标. cursor: pointer. 而hand 只适用于 IE.7, DIV浮动IE6/IE7 文本产生3象素的BUG 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. HTML_CODE: CSS_CODE .box float:left; width:800px; .left float:left; width:50%; .right width:50%; * html .left margin-right:-3px;/*补满*/-XHTML标签应用浅见在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！在 CSS 定义中，a:hover 必须位于a:active之前，这样 a:active 才能生效！meta http-equiv=”refres
