网站设计的时候,应该注意 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, !important (不是很推荐,用下面的一种感觉最安全) 随着 IE7 对!important 的支持, !important 方法现在只针对 IE6 的
兼容.(注意 写法.记得该声明位置需要提前.) 代码: <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } </style> 2, IE6/IE77 对 FireFox <from 针对 firefox ie6 ie7 的 css 样式> *+html 与 *html 是 IE 特有的标签, firefox 暂不支持.而*+html 又为 IE7 特 有标签. 代码: <style> #wrapper { width: 120px; } /* FireFox */ *html #wrapper { width: 80px;} /* ie6 fixed */ *+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */ </style> 注意: *+html 对 IE7 的
兼容 必须保证 HTML 顶部有如下声明: 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"> 二, 万能 float 闭合(非常重要!) 可以用这个解决多个 div 对齐时的间距不对, 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入 Global CSS 中,给需要闭合的 div 加上 class="clearfix" 即可,屡试不爽. 代码: <style> /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ </style> ********************************************************************* ************************************************** 三,其他
兼容技巧(相当有用) 1, FF 下给 div 设置 padding 后会导致 width 和 height 增加, 但 IE 不 会.(可用!important 解决) 2, 居中问题. 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.) 2).水平居中. margin: 0 auto;(当然不是万能) 3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航 标签) 4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题. 5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避 免不必要的麻烦. (常见于导航标签和内容列表) 6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden. 以达到高度自适应. 7, 关于手形光标. cursor: pointer. 而 hand 只适用于 IE.贴上代码:
兼容代码:
兼容最推荐的模式. /* FF */ .submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right: 12px; } /* IE6 */ *html .submitbutton { margin-top: 21px; } /* IE7 */ *+html .submitbutton { margin-top: 21px; } 什么是浏览器
兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个 网站,或者页面的时候,会出现一些不
兼容的问题,有的显示出来正常,有的显 示出来不正常,我们在编写 CSS 的时候会很恼火,刚修复了这个浏览器的问题, 结果另外一个浏览器却出了
新问题.而
兼容就是一种办法,能让你在一个 CSS 里面独立的写支持不同浏览器的样式.这下就和谐了.呵呵! 最近微软发布的 IE7 浏览器的
兼容性确实给一些网页制 作人员添加了一个沉重 的负担,虽然 IE7 已经走向标准化,但还是有许多和 FF 不同的地方,所以需要 用到 IE7 的
兼容,有许多朋友问过 IE7 的
兼容是什么, 其实我也不知道.暂时 还没找到 IE7 专用的
兼容.除了前面那片文章,《针对 firefox ie6 ie7 的 css 样式》中的
兼容方式也是很好用的. 有一点逻辑思想的人都会知道可以用 IE 和 FF 的
兼容结合起来使用, 下面介绍三 个
兼容,例如:(适合
新手,呵呵,高手就在这里路过吧.) 程序代码 第一个
兼容,IE FF 所有浏览器 公用(其实也不算是
兼容) height:100px; 第二个
兼容 IE6 专用 _height:100px; 第三个
兼容 IE6 IE7 公用 *height:100px; 介绍完了这三个
兼容了, 下面我们再来看看如何在一个样式里分别给一个属性定 义 IE6 IE7 FF 专用的
兼容,看下面的代码,顺序不能错哦: 程序代码 height:100px; *height:120px; _height:150px; 下面我简单解释一下各浏览器怎样理解这三个属性: 在 FF 下,第 2,3 个属性 FF 不认识,所以它读的是 height:100px; 在 IE7 下,第三个属性 IE7 不认识,所以它读第 1,2 个属性,又因为第二个属 性覆盖了第一个属性,所以 IE7 最终读出的是第 2 个属性 *height:120px; 在 IE6 下,三个属性 IE6 都认识,所以三个属性都可以读取,又因为第三个属性 覆盖掉前 2 个属性,所以 IE6 最终读取的是第三个属性. 1 针对 firefox ie6 ie7 的 css 样式 现在大部分都是用!important 来
兼容,对于 ie6 和 firefox 测试可以正常显示, 但是 ie7 对!important 可以正确解释,会导致页面 没按要求显示!找到一个针 对 IE7 不错的
兼容方式就是使用"*+html",现在用 IE7 浏览一下,应该没有问 题了现在写一个 CSS 可以这样: #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE*/ 那么在 firefox 下字体颜色显示为#333,IE6 下字体颜色显示为#666,IE7 下字 体颜色显示为#999. 2 css 布局中的居中问题 主要的样式定义如下: body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义 TEXT-ALIGN: center;这个的意思就是在父级元素内的内容 居中;对于 IE 这样设定就已经可以了. 但在 mozilla 中不能居中.解决办法就是在子元素定义时候设定时再加上 "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个 DIV 里,你可以依次拆出多个 div,只要在每个拆出的 div 里定义 MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了. 3 盒模型不同解释. #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0 } #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0} 4 浮动 ie 产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下 IE 会产生 200px 的距离 display:inline; //使浮动忽略} 这里细说一下 block,inline 两个元素,Block 元素的特点是:总是在
新行上开始, 高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是:和其他元素 在同一行上,…不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; // 实现同一行排列的的效果 diplay:table; 5 IE 与宽度和高度的问题 IE 不认得 min-这个定义, 但实际上它把正常的 width 和 height 当作有 min 的情 况来使.这样问题就大了,如果只用宽度和高度,正常的浏览器里 这两个值就 不会变,如果只用 min-width 和 min-height 的话,IE 下面根本等于没有设置宽 度和高度.比如要设置背景图片,这个宽度是比较重 要的.要解决这个问题, 可以这样: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 6 页面的最小宽度 min-width 是个非常方便的 CSS 命令, 它可以指定元素最小也不能小于某个宽度, 这样就能保证排版一直正确.但 IE 不认得这个,而它实际上把 width 当做最小 宽度来使.为了让这一命令在 IE 上也能用,可以把一个<div> 放到 <body> 标 签下,然后为 div 指定一个类: 然后 CSS 这样设计: #container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? "600px": "auto" ); } 第一个 min-width 是正常的;但第 2 行的 width 使用了 Javascript,这只有 IE 才认得,这也会让你的 HTML 文档不太正规.它实际上通过 Javascript 的判断来 实现最小宽度. 7 清除浮动 .
兼容 box{ display:table; //将对象作为块元素级的表格显示 } 或者 .
兼容 box{ clear:both; } 或者加入:after(伪对象),设置在对象后发生的内容,通常和 content 配合使 用,IE 不支持此伪对象,非 Ie 浏览器支持,所以并不影响到 IE/WIN 浏览器. 这种的最麻烦的 ……#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } 8&nbp;DIV 浮动 IE 文本产生 3 象素的 bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有 3px 的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%; } *html #left{ margin-right:-3px; //这句是关键 } HTML 代码 <DIV id=box> <DIV id=left></DIV> <DIV id=right></DIV> </DIV> 9 属性选择器(这个不能算是
兼容,是隐藏 css 的一个 bug) p[id]{}div[id]{} p[id]{}div[id]{} 这个对于 IE6.0 和 IE6.0 以下的版本都隐藏,FF 和 OPera 作用 属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性 选择器的范围比较大,如 p[id]中,所有 p 标签中有 id 的都是同样式的. 10 IE 捉迷藏的问题 当 div 应用复杂的时候每个栏中又有一些链接,DIV 等这个时候容易发生捉迷藏 的问题. 有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面. 解决办法:对#layout 使用 line-height 属性 或者给#layout 使用固定高和宽. 页面结构尽量简单. 11 高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节, 特别是 当内层对象使用 margin 或 paddign 时.例: <div id="box"> <p>p 对象中的内容</p> </div> CSS: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 解决方法:在 P 对象上下各加 2 个空的 div 对象 CSS 代 码:.1{height:0px;overflow:hidden;}或者为 DIV 加上 border 属性. 屏蔽 IE 浏览器(也就是 IE 下不显示) *:lang(zh) select {font:12px !important;} /*FF,OP 可见*/ select:empty {font:12px !important;} /*safari 可见*/ 这里 select 是选择符,根据情况更换.第二句是 MAC 上 safari 浏览器独有的. 仅 IE7 识别 *+html {…} 当面临需要只针对 IE7 做样式的时候就可以采用这个
兼容. IE6 及 IE6 以下识别 * html {…} 这个地方要特别注意很多地主都写了是 IE6 的
兼容其实 IE5.x 同样可以识别这个
兼容.其它浏览器不识别. html/**/ >body select {……} 这句与上一句的作用相同. 仅 IE6 不识别 select { display /*IE6 不识别*/:none;} 这里主要是通过 CSS 注释分开一个属性与值,流释在冒号前. 仅 IE6 与 IE5 不识别 select/**/ { display /*IE6,IE5 不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个 CSS 注释. 仅 IE5 不识别 select/*IE5 不识别*/ { display:none;} 这一句是在上一句中去掉了属性区的注释.只有 IE5 不识别 盒模型解决方法 selct {width:IE5.x 宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important 来
处理的.这点要明确. 清除浮动 select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 在 Firefox 中, 当子级都为浮动时, 那么父级的高度就无法完全的包住整个子级, 那么这时用这个清除浮动的
兼容来对父级做一次定义,那么就可以解决这个问 题 . 截字省略号 select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; } 这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一 个技术.只是目前 Firefox 并不支持. 只有 Opera 识别 @media all and (min-width: 0px){ select {……} } 针对 Opera 浏览器做单独的设定. 以上都是写 CSS 中的一些
兼容,建议遵循正确的标签嵌套(div ul li 嵌套结构 关系),这样可以减少你使用
兼容的频率,不要进入理解误区,并不是一个页面 就需要很多的
兼容来保持多浏览器
兼容), 很多情况下也许一个
兼容都不用 也可 以让浏览器工作得非常好,这些都是用来解决局部的
兼容性问题,如果希望把兼 容性的内容也分离出来,不妨试一下下面的几种过滤器.这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式,也有的是写在 HTML 中的通过条件来链接或 是导入需要的补丁样式. IE5.x 的过滤器,只有 IE5.x 可见 @media tty { i{content:"";/*" "*/}} @import 'ie5win.css'; /*";} }/* */ IE5/MAC 的过滤器,一般用不着 /**//*/ @import "ie5mac.css"; /**/ 下面是 IE 的条件注释, 个人觉得用条件注释调用相应
兼容是比较完美的多浏览 器
兼容的解决办法.把需要
兼容的地方单独放到一个文件里面,当浏览器版本符 合的时候就可以调用那个被
兼容的样式,这样不仅使用起来 非常方便,而且对 于制作这个 CSS 本身来讲,可以更严格的观察到是否有必要使用
兼容,很多情况 下,当我本人写 CSS 如果把全部代码包括
兼容都写到一个 CSS 文件的时候的时 候会很随意,想怎么
兼容就怎么
兼容,而你独立出来写的时候,你就会不自觉的 考虑是否有必要
兼容, 是先
兼容 CSS?还是先把主 CSS 里面的东西调整到尽可能 的不需要
兼容?当你仅用很少的
兼容就让很多浏览器很乖很听话的时候, 你是不 是很有成就感呢?你知道怎么选 择了吧～～呵呵 IE 的 if 条件
兼容 自己可以灵活使用参看这篇 IE 条件注释 Only IE 所有的 IE 可识别 只有 IE5.0 可以识别 Only IE 5.0+ IE5.0 包换 IE5.5 都可以识别 仅 IE6 可识别 Only IE 7/IE6 以及 IE6 以下的 IE5.x 都可识别 Only IE 7/- 仅 IE7 可识别 Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通 过很多的
兼容,很多的!important 来控制它,但是你会发现长此以往你会很不 甘心, 看看许多优秀的网站, 他们的 CSS 让 IE6,Ie7,Firefox,甚至 Safari,Opera 运行起来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的
兼容 少得 可怜.其实你要知道 IE 和 Firefox 并不不是那么的不和谐,我们找到一定的 方法,是完全可以让他们和谐共处的.不要你认为发现了
兼容的办法,你就掌握 了一切,我们并不是
兼容的奴隶. div ul li 的嵌套顺序 今天只讲一个规则.就是<div><ul><li>的三角关系.我的经验就是<div>在最外 面,里面 是<ul>,然后再是<li>,当然<li>里面又可以嵌套<div>什么的,但是 并不建议你嵌套很多 东西.当你符合这样的规则的时候,那些倒霉的,不听话 的间隙就不会在里面出现了, 当你仅仅是<div>里面放<li>, 而不 用<ul>的时候, 你会发现你的间隙十分难控制,一般情况下,IE6 和 IE7 会凭空多一些间距.但 很多情况你来到下一行,间隙就没了,但是前 面的内容又空了很大一块,出现 这种情况虽然你可以改变 IE 的 Margin,然后调整 Firefox 下面的 Padding,以 便使得两者显示起来得效果很相 似,但是你得 CSS 将变得臭长无比,你不得不 多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来
兼容它们,但是 你会烦得要命. 具体嵌套写法 遵循上面得嵌套方式,<div><ul><li></li></ul></div> 然后在 CSS 里面告诉 ul {Margin:0px adding:0px;list- style:none;},其中 list-style:none 是 不让<li>标记的最前方显示圆点或者数字等目录类型的标记,因为 IE 和 Firefox 显示出来默认效果有些不一样.因此这样不需要做任何手脚,你的 IE6, 和 IE7,Firefox 显示出来的东西(外距,间距,高度,宽度) 就几乎没什么区别 了, 也许细心的你会在某一个时刻发现一, 两个象素的差别, 但那已经很完美了, 不需要你通过调整大片的 CSS 来控制它们的显示了,你愿意, 你可以仅仅
兼容 一两个地方,而且通常这种
兼容可以适应各种地方,不需要你重复在不同的地方 调试不同的
兼容方式–减轻你的烦 overflow:hidden; } 这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一 个技术.只是目前 Firefox 并不支持. 只有 Opera 识别 @media all and (min-width: 0px){ select {……} } 针对 Opera 浏览器做单独的设定. 以上都是写 CSS 中的一些
兼容,建议遵循正确的标签嵌套(div ul li 嵌套结构 关系),这样可以减少你使用
兼容的频率,不要进入理解误区,并不是一个页面 就需要很多的
兼容来保持多浏览器
兼容), 很多情况下也许一个
兼容都不用 也可 以让浏览器工作得非常好,这些都是用来解决局部的
兼容性问题,如果希望把兼 容性的内容也分离出来,不妨试一下下面的几种过滤器.这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式,也有的是写在 HTML 中的通过条件来链接或 是导入需要的补丁样式. IE5.x 的过滤器,只有 IE5.x 可见 @media tty { i{content:"";/*" "*/}} @import 'ie5win.css'; /*";} }/* */ IE5/MAC 的过滤器,一般用不着 /**//*/ @import "ie5mac.css"; /**/ 下面是 IE 的条件注释, 个人觉得用条件注释调用相应
兼容是比较完美的多浏览 器
兼容的解决办法.把需要
兼容的地方单独放到一个文件里面,当浏览器版本符 合的时候就可以调用那个被
兼容的样式,这样不仅使用起来 非常方便,而且对 于制作这个 CSS 本身来讲,可以更严格的观察到是否有必要使用
兼容,很多情况 下,当我本人写 CSS 如果把全部代码包括
兼容都写到一个 CSS 文件的时候的时 候会很随意,想怎么
兼容就怎么
兼容,而你独立出来写的时候,你就会不自觉的 考虑是否有必要
兼容, 是先
兼容 CSS?还是先把主 CSS 里面的东西调整到尽可能 的不需要
兼容?当你仅用很少的
兼容就让很多浏览器很乖很听话的时候, 你是不 是很有成就感呢?你知道怎么选 择了吧～～呵呵 IE 的 if 条件
兼容 自己可以灵活使用参看这篇 IE 条件注释 Only IE 所有的 IE 可识别 只有 IE5.0 可以识别 Only IE 5.0+ IE5.0 包换 IE5.5 都可以识别 仅 IE6 可识别 Only IE 7/IE6 以及 IE6 以下的 IE5.x 都可识别 Only IE 7/仅 IE7 可识别 Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通 过很多的
兼容,很多的!important 来控制它,但是你会发现长此以往你会很不 甘心, 看看许多优秀的网站, 他们的 CSS 让 IE6,Ie7,Firefox,甚至 Safari,Opera 运行起 来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的
兼容 少 得可怜.其实你要知道 IE 和 Firefox 并不不是那么的不和谐,我们找到一定 的方法,是完全可以让他们和谐共处的.不要你认为发现了
兼容的办法,你就掌 握了一切,我们并不是
兼容的奴隶. div ul li 的嵌套顺序 今天只讲一个规则.就是<div><ul><li>的三角关系.我的经验就是<div>在最外 面,里面 是<ul>,然后再是<li>,当然<li>里面又可以嵌套<div>什么的,但是 并不建议你嵌套很多 东西.当你符合这样的规则的时候,那些倒霉的,不听话 的间隙就不会在里面出现了, 当你仅仅是<div>里面放<li>, 而不 用<ul>的时候, 你会发现你的间隙十分难控制,一般情况下,IE6 和 IE7 会凭空多一些间距.但 很多情况你来到下一行,间隙就没了,但是前 面的内容又空了很大一块,出现 这种情况虽然你可以改变 IE 的 Margin,然后调整 Firefox 下面的 Padding,以 便使得两者显示起来得效果很相 似,但是你得 CSS 将变得臭长无比,你不得不 多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来
兼容它们,但是 你会烦得要命. 具体嵌套写法 遵循上面得嵌套方式,<div><ul><li></li></ul></div> 然后在 CSS 里面告诉 ul {Margin:0px adding:0px;list- style:none;},其中 list-style:none 是 不让<li>标记的最前方显示圆点或者数字等目录类型的标记,因为 IE 和 Firefox 显示出来默认效果有些不一样.因此这样不需要做任何手脚,你的 IE6, 和 IE7,Firefox 显示出来的东西(外距,间距,高度,宽度) 就几乎没什么区别 了, 也许细心的你会在某一个时刻发现一, 两个象素的差别, 但那已经很完美了, 不需要你通过调整大片的 CSS 来控制它们的显示了,你愿意, 你可以仅仅
兼容 一两个地方,而且通常这种
兼容可以适应各种地方,不需要你重复在不同的地方 调试不同的
兼容方式–减轻你的烦 overflow:hidden; } 这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一 个技术.只是目前 Firefox 并不支持. 只有 Opera 识别 @media all and (min-width: 0px){ select {……} } 针对 Opera 浏览器做单独的设定. 以上都是写 CSS 中的一些
兼容,建议遵循正确的标签嵌套(div ul li 嵌套结构 关系),这样可以减少你使用
兼容的频率,不要进入理解误区,并不是一个页面 就需要很多的
兼容来保持多浏览器
兼容), 很多情况下也许一个
兼容都不用 也可 以让浏览器工作得非常好,这些都是用来解决局部的
兼容性问题,如果希望把兼 容性的内容也分离出来,不妨试一下下面的几种过滤器.这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式,也有的是写在 HTML 中的通过条件来链接或 是导入需要的补丁样式. IE5.x 的过滤器,只有 IE5.x 可见 @media tty { i{content:"";/*" "*/}} @import 'ie5win.css'; /*";} }/* */ IE5/MAC 的过滤器,一般用不着 /**//*/ @import "ie5mac.css"; /**/ 下面是 IE 的条件注释, 个人觉得用条件注释调用相应
兼容是比较完美的多浏览 器
兼容的解决办法.把需要
兼容的地方单独放到一个文件里面,当浏览器版本符 合的时候就可以调用那个被
兼容的样式,这样不仅使用起来 非常方便,而且对 于制作这个 CSS 本身来讲,可以更严格的观察到是否有必要使用
兼容,很多情况 下,当我本人写 CSS 如果把全部代码包括
兼容都写到一个 CSS 文件的时候的时 候会很随意,想怎么
兼容就怎么
兼容,而你独立出来写的时候,你就会不自觉的 考虑是否有必要
兼容, 是先
兼容 CSS?还是先把主 CSS 里面的东西调整到尽可能 的不需要
兼容?当你仅用很少的
兼容就让很多浏览器很乖很听话的时候, 你是不 是很有成就感呢?你知道怎么选 择了吧～～呵呵 IE 的 if 条件
兼容 自己可以灵活使用参看这篇 IE 条件注释 Only IE 所有的 IE 可识别 只有 IE5.0 可以识别 Only IE 5.0+ IE5.0 包换 IE5.5 都可以识别 仅 IE6 可识别 Only IE 7/IE6 以及 IE6 以下的 IE5.x 都可识别 Only IE 7/仅 IE7 可识别 Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通 过很多的
兼容,很多的!important 来控制它,但是你会发现长此以往你会很不 甘心, 看看许多优秀的网站, 他们的 CSS 让 IE6,Ie7,Firefox,甚至 Safari,Opera 运行起 来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的
兼容 少 得可怜.其实你要知道 IE 和 Firefox 并不不是那么的不和谐,我们找到一定 的方法,是完全可以让他们和谐共处的.不要你认为发现了
兼容的办法,你就掌 握了一切,我们并不是
兼容的奴隶. div ul li 的嵌套顺序 今天只讲一个规则.就是<div><ul><li>的三角关系.我的经验就是<div>在最外 面,里面 是<ul>,然后再是<li>,当然<li>里面又可以嵌套<div>什么的,但是 并不建议你嵌套很多 东西.当你符合这样的规则的时候,那些倒霉的,不听话 的间隙就不会在里面出现了, 当你仅仅是<div>里面放<li>, 而不 用<ul>的时候, 你会发现你的间隙十分难控制,一般情况下,IE6 和 IE7 会凭空多一些间距.但 很多情况你来到下一行,间隙就没了,但是前 面的内容又空了很大一块,出现 这种情况虽然你可以改变 IE 的 Margin,然后调整 Firefox 下面的 Padding,以 便使得两者显示起来得效果很相 似,但是你得 CSS 将变得臭长无比,你不得不 多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来
兼容它们,但是 你会烦得要命. 具体嵌套写法 遵循上面得嵌套方式,<div><ul><li></li></ul></div> 然后在 CSS 里面告诉 ul {Margin:0px adding:0px;list- style:none;},其中 list-style:none 是 不让<li>标记的最前方显示圆点或者数字等目录类型的标记,因为 IE 和 Firefox 显示出来默认效果有些不一样.因此这样不需要做任何手脚,你的 IE6, 和 IE7,Firefox 显示出来的东西(外距,间距,高度,宽度) 就几乎没什么区别 了, 也许细心的你会在某一个时刻发现一, 两个象素的差别, 但那已经很完美了, 不需要你通过调整大片的 CSS 来控制它们的显示了,你愿意, 你可以仅仅
兼容 一两个地方,而且通常这种
兼容可以适应各种地方,不需要你重复在不同的地方 调试不同的
兼容方式–减轻你的烦.你可以 ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要
兼容的地方,而统一
兼容.尝试一下吧,再 也不要乱嵌套了, 虽然在
Div+CSS 的方式下你几乎可以想怎么嵌套 就怎么嵌套, 但是按照上面的规律你将轻松很多,从而事半功倍! 去掉 ie 有默认最低高度 <div style="height:2px; background:red;overflow:hidden;"></div> 其中 height:2px 为你要设的高度,overflow:hidden 最为关键,他就是帮你去 掉默认高度
2247
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
