CSS对各个浏览器兼容
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、万能 float 闭合
关于 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 相同的高度, 再通过 vertical-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.
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在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;
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:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Java script ，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Java script 的判断来实现最小宽度。
7 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8 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]{}
这个对于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属性
解决CSS中遇到的浏览器兼容性问题，最简单的方式为CSS Hack，现在我们讲将不同浏览器中CSS Hack写法！
区别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)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
CSS常用17大经典技巧
1. CSS网页制作中使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
清除容器浮动
#main {
overflow:hidden;
}
期前也提到过这样的问题，更多信息可以看这里。
2. CSS网页制作中不让链接折行
a {
white-space:nowrap;
}
上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。
3. CSS网页制作中始终让 Firefox 显示滚动条
html {
overflow:-moz-scrollbars-vertical;
}
更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持，也可以使用
body, html {
min-height:101%;
}
4. CSS网页制作中使块元素水平居中
margin:0 auto;
其实就是
margin-left: auto;
margin-right: auto;
这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用
body{
text-align: center;
}
然后定义内层容器
text-align: left;
恢复。
5. CSS网页制作中隐藏 Exploer textarea 的滚动条
textarea {
overflow:auto;
}
Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。
设置打印分页
h2 {
page-break-before:always;
}
page-break-before 属性能设置打印网页时的分页。
6. CSS网页制作中删除链接上的虚线框
a:active, a:focus {
outline:none;
}
Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。
最简单的 CSS 重置
* {
margin: 0; padding: 0
}
如果想“复杂”，参考YUI 的做法（还有这里）。原文留言中也有用户说了他们的观点
I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;}
basically means "traverse every css element and give it these
attributes". That is a very unnecessary strain on the server and
a bad semantic practice, as you have to give some elements
padding/margin again, after stripping them
7. CSS字体定义简写规则
一般的写法会是这样：
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
而实际上你可以用更简洁的写法：
font: bold italic small-caps 1em/1.5em verdana,sans-serif
是不是更省事？不过使用这种简写需要注意几点：要使简写定义有效必须至少提供 font-size 和 font-family 这两个属性；同时font-weight, font-style 以及 font-varient 这几个属性如果不做设定的话将默认为normal。
还有background，border等等.
8. CSS网页设计关于background的写法
DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}
1）您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。
2）url括号中的引号是没有必要的，我们可以不写引号
2. 关于Border的写法，如果您想定义div的四个边的颜色不同，而粗度和样式都一样，您可以这样写：
DIV.special{border:1px solid; border-color:color1 color2 color3 color4}
四种颜色一次是上，右，下，左的颜色
颜色相同就合并成：
DIV.special{border:1px solid color4}
9. CSS网页设计同时使用两个Class定义
一般我们只会给内容块指定一个Class，但这并不代表我们只能指定一个。实际上只要你愿意，可以同时把任意多个Class赋给某块内容。比如：
...
多个Class之间用空格分隔即可。当多个Class之间的属性发生重叠的时候，将根据各个Class在CSS定义文件中被定义的位置，后定义的Class属性自动覆盖之前定义的Class属性（而不是根据你在class="text side"这里排列的顺序来进行覆盖）
10. CSS网页设计 border的缺省值
通常我们定义border属性都会提供color,width,style这些属性。比如 border: 3px solid #000 。不过实际上必须要提供的属性只有style。如果你只写 border: solid 的话，其他的属性自动使用缺省值。border的缺省宽度是medium(大约3px-4px)，缺省的颜色是位于border里面的内容文字的颜色。如果这些缺省值可以满足你的要求，你完全可以省略这两项属性。
11. CSS网页设计专门用于打印的CSS文档
很多web页面都会提供一个打印链接，方便用户使用另一种适合打印界面的CSS。但实际上你完全可以为你的页面指定两个CSS文档link，这样浏览器会自动调用合适的CSS来用于显示或打印。比如：
通过指定link的media属性，浏览器就能根据需要来调用特定的CSS文件来处理页面了。关于打印更多的建议，请参见 Print Different,
12. CSS网页设计中的内容垂直对齐
用传统的table来实现垂直对齐很容易，只要用 vertical-align: middle 就可以让table的内容垂直居中。但这个属性在CSS里面却行不通。
解决方法是把内容的行高设置成与内容块一样高。比如你的div高是32px，那就在你的CSS定义里面添加属性 line-height: 32px; 这样文字看上去就垂直居中于层里面了。不过这个方法只适用于单行文字，对于多行文字，似乎没有什么好方法。
13. CSS网页设计Text-transform 属性
这个属性可能也是CSS当中用的人不多但却很有用处的属性之一。其常见的可用值包括：text-transform: uppercase, text-transform: lowercase 以及 text-transform: capitalize。第一个将把所有的字母转化成大写；第二个将把所有字母转成小写；第三个则把每个单词的首字母转成大写。不过对于非英文网站来说，这个功能确实就没什么用了。
14. CSS网页设计IE中消失的文字和图片
IE有个很莫名其妙的Bug：有时候文字或者背景图片死活显示不出来。如果你全选整个页面，会发现那些内容实际上还在那里，或者重新刷新一下页面显示就正常了。
通常来说这个问题都发生在那些跟在浮动元素后面显示的文字或背景图片身上。要解决这个问题，可以试试给你的那些消失的元素加上position: relative 属性。如果还不行，再试试设置一下width属性。一般来说这样做之后问题就解决了。
15. CSS网页设计颜色的缩写
我们可以将#ff0033缩写成#f03
16. CSS网页设计关闭输入法状态
使用户只能输入英文状态下的字符，类似输入密码
input {ime-mode: disabled ; }
17. CSS网页设计让背景色能够垂直拉齐到底部
CSS与传统的table来说另一个让人不爽的地方是它的垂直层的对齐。如果你的页面分为两列，其中一列比较长而另一列比较短，同时两列的背景色和页面总的背景色是不同的话，显示出来的效果就比较丑陋，不像table那样只要把td的高度设成100%就能够把每一列的高度拉到一样长。
要解决这个问题似乎只能用一个取巧的办法，根据每列的宽度和背景色设置背景图片，让用户看上去似乎拉平了：
body
{
background: url(blue-image.gif) 0 0 repeat-y
}
18. block / inline 属性
任何一个HTML元素都是block或者inline的。
block元素的特性包括：
总是另起一行开始显示
height, line-height, top/bottom margin属性可以被设置
width缺省值是100%,除非你指定了另外的width值
这一类的HTML元素包括
,
, ,
以及- 等。
inline元素的特性包括：
直接跟在当前行的后面显示
height, line-height, top/bottom margin属性不能改变
width值就等于包含其中的文字/图片的宽度，并且这个值不能被改变
你可以通过设置元素属性display: inline 或 display: block来改变元素的以上特性。19. CSS设计技巧中设置页面的最小宽度
CSS语法中很有用的一个属性是 min-width 。通过这个属性你可以设置任何元素的最小宽度。也就是说你也可以用这个来限制页面显示的最小宽度。
但有个小问题是：IE浏览器无法为元素设置min-width，因此要让这个属性起作用，我们需要走点弯路。
首先在后面插入一个：然后在CSS定义里面定义最小宽度为600px：
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}第一个属性是最小宽度定义的标准写法；第二个属性则是只有IE能够理解的java script 表达式。
你也可以同时设定页面的最大最小宽度：#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
