CSS 技巧
1.div 的垂直居中问题 vertical-align:middle; 将行距增加到和整个 DIV 一样高 line-height:200px; 然后插入文字, 就垂直居中了缺点是要控制内容不要换行?
margin 加倍的问题? 设置为 float 的 div 在 ie 下设置的 margin 会加倍这是一个 ie6 都存在的 bug 解决方案是在这个 div 里面加上 display:inline;? 例如:?<#div id=imfloat>? 相应的 css 为?#IamFloat{?float:left;?margin:5px;/IE 下理解为 10px/?display:inline;/IE 下再理解为 5px/}?
3. 浮动 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;?
4 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;}?
5. 页面的最小宽度? min -width 是个非常方便的 CSS 命令, 它可以指定元素最小也不能小于某个宽度, 这样就能保证排版一直正确但 IE 不认得这个, 而它实际上把 width 当做最小宽度来使为了让这一命令在 IE 上也能用, 可以把一个 < div> 放到 <body > 标签下, 然后为 div 指定一个类, 然后 CSS 这样设计:?#container{ min-width: 600px; width:expression(document.body.clientWidth <600? "600px": "auto" );}? 第一个 min-width 是正常的; 但第 2 行的 width 使用了 Javascript, 这只有 IE 才认得, 这也会让你的 HTML 文档不太正规它实际上通过 Javascript 的判断来实现最小宽度
6.DIV 浮动 IE 文本产生 3 象素的 bug? 左边对象浮动, 右边采用外补丁的左边距来定位, 右边对象内的文本会离左边有 3px 的间距.?#box{ float:left; width:800px;}?#left{ float:left; width:50%;}?#right{ width:50%;}?*html #left{ margin-right:-3px; // 这句是关键}?<div id="box">?<div id="left"></div>?<div id="right"></div>?</div>?
7.IE 捉迷藏的问题? 当 div 应用复杂的时候每个栏中又有一些链接, DIV 等这个时候容易发生捉迷藏的问题? 有些内容显示不出来, 当鼠标选择这个区域是发现内容确实在页面 解决办法: 对 #layout 使用 line-height 属性 或者给 #layout 使用固定高和宽页面结构尽量简单?
8.float 的 div 闭合; 清除浮动; 自适应高度;?
例如:<#div id=floatA><#div id=floatB><#div id= NOTfloatC > 这里的 NOTfloatC 并不希望继续平移, 而是希望往下排(其中 floatAfloatB 的属性已经设置为 float:left;)? 这段代码在 IE 中毫无问题, 问题出在 FF 原因是 NOTfloatC 并非 float 标签, 必须将 float 标签闭合在 <#div class=floatB> <#div class=NOTfloatC > 之间加上 <#div class=clear > 这个 div 一定要注意位置, 而且必须与两个具有 float 属性的 div 同级, 之间不能存在嵌套关系, 否则会产生异常 并且将 clear 这种样式定义为为如下即可: .clear{ clear:both;}?
作为外部 wrapper 的 div 不要定死高度, 为了让高度能自动适应, 要在 wrapper 里面加上 overflow:hidden; 当包含 float 的 box 的时候, 高度自动适应在 IE 下无效, 这时候应该触发 IE 的 layout 私有属性 (万恶的 IE 啊!) 用 zoom:1; 可以做到, 这样就达到了兼容? 例如某一个 wrapper 如下定义:?.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}?
对于排版, 我们用得最多的 css 描述可能就是 float:left. 有的时候我们需要在 n 栏的 float div 后面做一个统一的背景, 譬如:?<div id=page>?<div id=left></div>?<div id=center></div>?<div id=right></div>?</div>? 比如我们要将 page 的背景设置成蓝色, 以达到所有三栏的背景颜色是蓝色的目的, 但是我们会发现随着 left center right 的向下拉长, 而 page 居然保存高度不变, 问题来了, 原因在于 page 不是 float 属性, 而我们的 page 由于要居中, 不能设置成 float, 所以我们应该这样解决?<div id=page>?<div id=bg style=float:left;width:100%>?<div id=left></div>?<div id=center></div>?<div id=right></div>?</div>?</div>? 再嵌入一个 float left 而宽度是 100% 的 DIV 解决之?
万能 float 闭合(非常重要!)? 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup], 将以下代码加入 Global CSS 中, 给需要闭合的 div 加上 class="clearfix" 即可, 屡试不爽.?/ 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 /? 或者这样设置:.hackbox{ display:table; // 将对象作为块元素级的表格显示}?
11. 高度不适应? 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节, 特别是当内层对象使用 margin 或 paddign 时? 例:?#box {background-color:#eee; }?#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }?<div id="box">?<p>p 对象中的内容 </p>?</div>? 解决方法: 在 P 对象上下各加 2 个空的 div 对象 CSS 代码:.1{height:0px;overflow:hidden;} 或者为 DIV 加上 border 属性
12 .IE6 下为什么图片下有空隙产生 解决这个 BUG 的方法也有很多, 可以是改变 html 的排版, 或者设置 img 为 display:block 或者设置 vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
13. 如何对齐文本与文本输入框 加上 vertical-align:middle; <style type="text/css"> <!-- input {?width:200px;?height:30px;?border:1px solid red;?vertical-align:middle; } --> </style>
14.web 标准中定义 id 与 class 有什么区别吗 一. web 标准中是不容许重复 ID 的, 比如 div id="aa"? 不容许重复 2 次, 而 class 定义的是类, 理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二. 属性的优先级问题 ID 的优先级要高于 class, 看上面的例子 三. 方便 JS 等客户端脚本, 如果在页面中要对某个对象进行脚本操作, 那么可以给他定义一个 ID, 否则只能利用遍历页面元素加上指定特定属性来找到它, 这是相对浪费时间资源, 远远不如一个 ID 来得简单.
LI 中内容超过长度后以省略号显示的方法 此方法适用与 IE 与 OP 浏览器 <style type="text/css"> <!-- li {?width:200px;?white-space:nowrap;?text-overflow:ellipsis;?-o-text-overflow:ellipsis;?overflow: hidden;?} --> </style>
16. 为什么 web 标准中 IE 无法设置滚动条颜色了 解决办法是将 body 换成 html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">; <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- html {?scrollbar-face-color:#f6f6f6;?scrollbar-highlight-color:#fff;?scrollbar-shadow-color:#eeeeee;?scrollbar-3dlight-color:#eeeeee;?scrollbar-arrow-color:#000;?scrollbar-track-color:#fff;?scrollbar-darkshadow-color:#fff;?} --> </style>
17. 为什么无法定义 1px 左右高度的容器 IE6 下这个问题是因为默认的行高造成的, 解决的方法也有很多, 例如: overflow:hidden | zoom:0.08 | line-height:1px
18. 怎么样才能让层显示在 FLASH 之上呢 解决的办法是给 FLASH 设置透明 <param name="wmode" value="transparent" />
19. 怎样使一个层垂直居中于浏览器中 这里我们使用百分比绝对定位, 与外补丁负值的方法, 负值的大小为其自身宽度高度除以二 < style type="text/css"> <!-- div {?position:absolute;?top:50%;?lef:50%;?margin:-100px 0 0 -100px;?width:200px;?height:200px;?border:1px solid red;?} --> </style>?
FF 与 IE?
Div 居中问题? div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行, IE 需要设定 body 居中, 首先在父级元素定义 text-algin: center; 这个的意思就是在父级元素内的内容居中?
2. 链接 (a 标签) 的边框与背景? a 链接加边框和背景色, 需设置 display: block, 同时设置 float: left 保证不换行参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格
3. 超链接访问过后 hover 样式就不出现的问题 被点击访问过的超链接样式不在具有 hover 和 active 了, 很多人应该都遇到过这个问题, 解决方法是改变 CSS 属性的排列顺序: L-V-H-A Code: <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style>?
游标手指 cursor?cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以?
5.UL 的 padding 与 margin?ul 标签在 FF 中默认是有 padding 值的, 而在 IE 中只有 margin 默认有值, 所以先定义 ul{margin:0;padding:0;}就能解决大部分问题?
FORM 标签? 这个标签在 IE 中, 将会自动 margin 一些边距, 而在 FF 中 margin 则是 0, 因此, 如果想显示一致, 所以最好在 css 中指定 margin 和 padding, 针对上面两个问题, 我的 css 中一般首先都使用这样的样式 ul,form{margin:0;padding:0;}给定义死了, 所以后面就不会为这个头疼了.?
BOX 模型解释不一致问题? 在 FF 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法: div{margin:30px!important;margin:28px;} 注意这两个 margin 的顺序一定不能写反, important 这个属性 IE 不能识别, 但别的浏览器可以识别所以在 IE 下其实解释成这样: div {maring:30px;margin:28px}重复定义的话按照最后一个来执行, 所以不可以只写 margin:xx px!important;?#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-}?
8. 属性选择器 (这个不能算是兼容, 是隐藏 css 的一个 bug)?p[id]{}div[id]{}? 这个对于 IE6.0 和 IE6.0 以下的版本都隐藏, FF 和 OPera 作用. 属性选择器和子选择器还是有区别的, 子选择器的范围从形式来说缩小了, 属性选择器的范围比较大, 如 p[id] 中, 所有 p 标签中有 id 的都是同样式的.?
9. 最狠的手段 - !important;? 如果实在没有办法解决一些细节问题, 可以用这个方法. FF 对于! important 会自动优先解析, 然而 IE 则会忽略. 如下?.tabd1{?background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /Style for FF/?background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; / Style for IE /}? 值得注意的是, 一定要将 xxxx !important 这句放置在另一句之上, 上面已经提过?
10.IE,FF 的默认值问题? 或许你一直在抱怨为什么要专门为 IE 和 FF 写不同的 CSS, 为什么 IE 这样让人头疼, 然后一边写 css, 一边咒骂那个可恶的 M$ IE. 其实对于 css 的标准支持方面, IE 并没有我们想象的那么可恶, 关键在于 IE 和 FF 的默认值不一样而已, 掌握了这个技巧, 你会发现写出兼容 FF 和 IE 的 css 并不是那么困难, 或许对于简单的 css, 你完全可以不用! important 这个东西了? 我们都知道, 浏览器在显示网页的时候, 都会根据网页的 css 样式表来决定如何显示, 但是我们在样式表中未必会将所有的元素都进行了具体的描述, 当然也没有必要那么做, 所以对于那些没有描述的属性, 浏览器将采用内置默认的方式来进行显示, 譬如文字, 如果你没有在 css 中指定颜色, 那么浏览器将采用黑色或者系统颜色来显示, div 或者其他元素的背景, 如果在 css 中没有被指定, 浏览器则将其设置为白色或者透明, 等等其他未定义的样式均如此所以有很多东西出现 FF 和 IE 显示不一样的根本原因在于它们的默认显示不一样, 而这个默认样式该如何显示我知道在 w3 中有没有对应的标准来进行规定, 因此对于这点也就别去怪罪 IE 了
11. 为什么 FF 下文本无法撑开容器的高度 标准浏览器中固定高度值的容器是不会象 IE6 里那样被撑开的, 那我又想固定高度, 又想能被撑开需要怎样设置呢? 办法就是去掉 height 设置 min-height:200px;? 这里为了照顾不认识 min-height 的 IE6 可以这样定义: { height:auto!important; height:200px; min-height:200px; }
12.FireFox 下如何使连续长字段自动换行 众所周知 IE 中直接使用 word-wrap:break-word 就可以了, FF 中我们使用 JS 插入 的方法来解决 <style type="text/css"> <!-- div {?width:300px;?word-wrap:break-word;?border:1px solid red; } --> </style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <scrīpt type="text/javascrīpt"> / <![CDATA[ / function toBreakWord(el, intLen){?var ōbj=document.getElementById(el);?var strContent=obj.innerHTML;?var strTemp="";?while(strContent.length>intLen){?strTemp+=strContent.substr(0,intLen)+" ";?strContent=strContent.substr(intLen,strContent.length);?}?strTemp+=" "+strContent;?obj.innerHTML=strTemp; } if(document.getElementById?&&?!document.all)?toBreakWord("ff", 37); / ]]> / </scrīpt>
13. 为什么 IE6 下容器的宽度和 FF 解释不同呢 <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">; <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div {?cursor:pointer;?width:200px;?height:200px;?border:10px solid red?} --> </style> <div ōnclick="alert(this.offsetWidth)">让 FireFox 与 IE 兼容 </div> 问题的差别在于容器的整体宽度有没有将边框(border) 的宽度算在其内, 这里 IE6 解释为 200PX , 而 FF 则解释为 220PX, 那究竟是怎么导致的问题呢? 大家把容器顶部的 xml 去掉就会发现原来问题出在这, 顶部的申明触发了 IE 的 qurks mode
IE6,IE7,FF?IE7.0 出来了, 对 CSS 的支持又有新问题浏览器多了, 网页兼容性更差了, 疲于奔命的还是我们 , 为解决 IE7.0 的兼容问题, 找来了下面这篇文章: 现在我大部分都是用! important 来 hack, 对于 ie6 和 firefox 测试可以正常显示, 但是 ie7 对! important 可以正确解释, 会导致页面没按要求显示! 下面是三个浏览器的兼容性收集.?
第一种, 是 CSS HACK 的方法? height:20px; /For Firefox/?height:25px; /For IE7 & IE6/?_height:20px; /For IE6/? 注意顺序? 这样也属于 CSS HACK, 不过没有上面这样简洁?#example { color: #333; } / Moz /? html #example { color: #666; } / IE6 /?+html #example { color: #999; } / IE7 */?
<!-- 其他浏览器 -->?<link rel="stylesheet" type="text/css" href="css.css" />?<!--[if IE 7]>?<!-- 适合于 IE7 -->?<link rel="stylesheet" type="text/css" href="ie7.css" />?<![endif]-->?<!--[if lte IE 6]>?<!-- 适合于 IE6 及一下 -->?<link rel="stylesheet" type="text/css" href="ie.css" />?<![endif]-->?
第三种, css filter 的办法, 以下为经典从国外网站翻译过来的.? 新建一个 css 样式如下:?#item {?width: 200px;?height: 200px;?background: red;?}? 新建一个 div, 并使用前面定义的 css 的样式:?<div id="item">some text here</div>? 在 body 表现这里加入 lang 属性, 中文为 zh:?<body lang="en">? 现在对 div 元素再定义一个样式:?*:lang(en) #item{?background:green !important;?}? 这样做是为了用! important 覆盖原来的 css 样式, 由于: lang 选择器 ie7.0 并不支持, 所以对这句话不会有任何作用, 于是也达到了 ie6.0 下同样的效果, 但是很不幸地的是, safari 同样不支持此属性, 所以需要加入以下 css 样式:?#item:empty {?background: green !important?}?:empty 选择器为 css3 的规范, 尽管 safari 并不支持此规范, 但是还是会选择此元素, 不管是否此元素存在, 现在绿色会现在在除 ie 各版本以外的浏览器上? 对 IE6 和 FF 的兼容可以考虑以前的!
如果对你有帮助, 记得给李李赞一个 么么哒
来源: http://www.qdfuns.com/article/36458/4f01803e6b44859a9acf8a732fa83296.html