区分IE8/IE7/IE6及其他浏览器-CSS “\9″ 原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=723 一.前面的唠叨 CSS hack这个东东可以说是老掉牙的东西,我是不会再放到锅里炒的.之所以写这篇文章,更主要的是介绍一个CSS hack – “\9″

ie6,ie7的haslayout属性是个让人头疼的问题.在做导航条的时候,一般会用到ul li结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行.还有一种方法就是设置li为display:inline;这样可以达到同样的效果,但是问题是inline元素的特性:默认无法设置宽度,高度,以及上下margin,(关于padding,情况有点特殊,在ie6,7中 inline元素是无法设置上下padding的,但是在标准浏览器里面是可以设置上下padding的). 鉴于inline元素的这种

1.使用声明你必须经常在html网页头部放置一个声明,推荐使用严格的标准.例如<!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN”   "http://www.w3.org/TR/html4/strict.dtd”> or,forXHTML:  <!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-st

hack基础: IE6: _selector{property:value;} selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important IE7: +selector{property:value;} IE8: selector{property:value\0;} IE6 & IE7: *selector{property:value;} IE6 & IE7 & IE8: sel

在IE6,IE7下使用<span>标签时,在加入右浮动样式后,会换行的bug解决方案: bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li><a href=“#”>新闻1</a> <span>2012-12-24</span></li> <li><a href=“#”>新闻1</a> <span>2012-12-24</span>

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important;一.CSS 兼容 以下两种方法几乎能解决现今所有兼容.

1.png24位的图片在ie6浏览器上会出现背景,解决方案是做成png8位: 2.浏览器默认的margin和padding不同,解决方法是用全局重置来统一,即是*{margin:0;padding:0} 3.对于块元素,给了横行的margin值,和浮动float,在ie6中会产生双边距问题,解决方法是转行内元素,eg:#box{ float:left; width:10px; margin:0 0 0 10px;_display:inline}在这种情况下ie6会产生20px的边距: 4. 渐进

虽然说现在早就不用ie6浏览器了,可以还是有一小部分还在使用 ,刚好公司也有要求~~~ <p> E6不兼容png图片,确实让网页的图片质量大大下降,为了兼容万恶的IE6,总结了下面几种方法: 1,通过CSS滤镜使背景图的PNG对IE6进行兼容. 2,给img定义样式,页面上所有透明png即自动透明了. 3,通过JS,插入一段代码,实现img标签png兼容IE6的问题. 4,可以把png图片,转换为gif图片.(最简单常用的方法) </p> 第一种方法: 1.通过CSS滤镜使背景图的

区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6:   background:orange;*background:green !important;*background:blue; 注:IE都能识别*;标准浏览器(如FF

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS 兼容 以下两种方法几乎能解决现今所有兼容

!important !important是CSS1中定义的语法,作用是提高指定样式规则的应用优先权.语法格式如:.demo{color:red !important;} IE6支持重定义的!important,其它浏览器能够正常识别.. HTML: <div class="demo">!important</div> CSS: 如果将!important应用在同一选择器中,IE6不起作用. .demo { color: blue !important; col

1.使用声明 你必须经常在html网页头部放置一个声明,推荐使用严格的标准.例如 <!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN”   "http://www.w3.org/TR/html4/strict.dtd”> or,forXHTML:  <!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important;一.CSS 兼容 以下两种方法几乎能解决现今所有兼容. 1, !important (不是很推荐,用下面的一种感觉最安全) 随着IE7对!i

"\9"可以将ie浏览器与其他浏览器区分开 ie6,ie7可识别"+" 只有ie6能识别"_" 例: .aa{ background-color:#fff;/*所有浏览器都识别*/ . background-color:#f00\9;/*ie6,7,8识别*/ +background-color:#00f;/*ie6,7识别*/ _ background-color:#0f0;/*ie6识别*/ }

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" /> 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如 margin-left:10px !important;; margin-left:5px; +height:120px

10要点解决IE6兼容性问题 1.使用声明 你必须经常在html网页头部放置一个声明,推荐使用严格的标准.例如 <!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN” "http://www.w3.org/TR/html4/strict.dtd”>or,forXHTML: <!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN” "http://www.w3.org/TR/xhtml1/DT

使用场景分析: 常见的对块与块之间的横向排列处理 对同级所有元素使用display:inline-block; , 之后块与块直接会产生间隙问题 解决办法: 给父级设 font-size:0; 别高兴的太早,我们看看在ie7的时候,是显示如何 我们可以发现,问题有二 ① inline-block失效了 原因:inline-block 在ie7及ie6下不识别 解决方法:在后面添加 display: inline-block; zoom:1; /*IE 下触发 hasLayout*/ *displ

开篇之前,循例简单说说IE6的一些背景吧. IE6是指微软浏览器系列中的第六个版本,它是在2001年的时候伴随着XP系统的问世而同时推出的一款浏览器.因为XP普及的原因,这款浏览器一度问鼎全球浏览器市场份额宝座,最高的时候甚至超过了90%!它风光过,可是也留下了非常惹人麻烦的手尾,尤其是对开发人员来说.近年来互联网发展迅猛,网络或者说网站对我们来说显得越来越重要.随之而来的是,网页制作就变得越来越重要了,所以从前的网页制作演变成了现在的前端开发.因为web应用越来越多,也越来越复杂,所以标准和规

我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样. 首先,先看下面一段代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>测试Css中的

1.IE6中第一个元素浮动第二个元素不浮动,这两个元素之间就会产生3像素BUG 2.解决方案: 2.1若若宽度一定则给第二个元素添加 float 样式即可: 2.2若宽度自适应: 2.2.1  _margin-right:-3px;   // IE6及更低版本均可解析下划线hack 2.2.2 * HTML作为一种hack来解决浏览器之间的不兼容 3.拓展:浏览器之间兼容 3.1 div{ padding-left:300px;                padding-left:250px

1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁. 产生条件:不同浏览器: 解决办法:利用CSS reset文件进行样式的清除,然后再根据需要进行设置. 3.横向双倍外边距 产生条件:在IE6中块元素浮动后,会出现横向双倍margin现象. 解决办法: 在float标签的样式控制中加入display:inl