CSS常见问题及小技巧汇总
一、常见问题
1、div标签未关闭
这是书写代码是最为常见的一种错误了。特别是记事本书写习惯的设计师，在未关闭的情况下记事本的不会提示你什么，如果是在DW中，未关闭DIV，开始的DIV会显示灰色，即无效。
2、DOCTYPE声明
不声明DOCTYPE，或者在文件开始错误声明DOCTYPE，也是一个常见错误。根据一般经验，Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。
3、结尾斜线
结尾斜线也是造成页面失效比较常见的原因。我们很容易忽略结尾斜线之类的东西，特别是在image标签等元素中。在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。
4、图像alt属性
你可能还没有注意到，图像也是高级验证的潜在绊脚石。除了结尾斜线，高级验证也要求用alt标签来描述图像，如alt="收藏生活，享受生活"。搜索引擎也靠alt标签来识别网页上的图像，所以无论怎样加上alt标签总是好的。
5、未知实体数据
实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替“&”等符号。entire list中列出在XHTML版块设计中可用的适当的编码字符实体数据。
6、不良嵌套
嵌套就是元素里又包括元素，如下所示：
我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签，但又先关闭div标签。这可能不会改变版块布局，但却会使你的版块设计失效。
7、float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
-------------------------------------------------------------------------------------------
1，有关DIV居中的问题。
在body中如果设置DIV#box居中的话,用text-align:center；
效果是在IE6中可实现居中，且box中的文字也居中，而在FF中的表现是，文字居中，层box默认居左；为了改变这种差异一般用：
body{margin:auto;} box{margin:auto;}这样在IE6和FF中都一样；
2,float浮动元素。
float可定位DIV，而设置为float的DIV其margin值在IE下会加倍，FF中不会。这样如果设计者对多个浮动的DIV进行了margin设置（如#item1,#item2,#item3{float:left;margin-left:5px;}），则显示结果在IE下与FF下会有很大差异。解决方案是在这个DIV中加入display:inline;如：
#item1,#item2,#item3
{float:left;
margin-left:5px; /*ie理解为10px*/
display:inline; /*ie再理解为5px*/
}
3,ul标签
ul和uo在FF中默认的padding值不为0，在ie中默认的margin值不为0；因此在对UL进行操作之前先定义ul{margin:0; padding:0;}，之后对ul时行的设置，在两种浏览器是表现一致的。
4，FF中BOX内容能自动伸到页面底部的方法。
在IE中使用height:auto;可使高度随内容增加，而在firefox中高度就成固定的，BOX里面的子层会溢出。
解决这个问题可以在BOX中加入一个隐藏的层：<div id="clearbox"></div>,这个层做为BOX的最后一个子层，高度自适应问题就可解决。
clearbox定义如下：
.clearbox{
border-top:1px solid transparent!important;
margin-top:-1px!important;
border-top:0;
margin-top:0;
clear:both;
visibility:hidden;
}
其作用就是解决浮动元素引起父元素无法获得高度的问题。
5, 另外，设置 overflow:auto;也可以；
6,当文字和图片在同一行出现时，如何才能使他们在垂直方向居中呢？
<div id="abc">文字一：<img src=http://www.jzxue.com/wangyesheji/css/201107/".pic/btn.gif" /></div>
关键在于CSS中对图片文件加上#abc img{vertical-align:middle;}的描述，就可以使它们的中心在同一水平线上了！
7, 一个设置了边框的容量，如#BOXa{border:#ccc solid 1px;}，它里面有浮动元素，拖动滚动条时，在IE6,7中有时会出现边框断线的情况（FF中不会），这时的解决办法是在#BOXa中加一个属性：background:#fff;一般可以解决；
8,仅IE7可以识别
*+html select {…!important;}
=================================
你知道#box div{...}这样写的含义吗？
是指，文档中，以box为ID的元素下边的所有标签名为div的元素！也就是说，它并不是来给box赋样式，而是给box下的那两个div赋样式！（让它俩的字为红色）
而你把div去了，那就是说这次是给box赋样式了，那么下面的div根本没有指定任何样式，所以按css的规定，靠近元素最近的样式将生效！
===========================================
-------------------------------------------------------------------------------------------
一、IE6的双倍边距BUG
例如:
复制内容到剪贴板 程序代码
<style type="text/css">
body {margin:0;}
div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;}
</style>
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
二、为什么FF下文本无法撑开容器的高度？
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
复制内容到剪贴板 程序代码
div { height:auto!important; height:200px; min-height:200px; }
三、怎么样才能让层显示在FLASH之上呢？
解决的办法是给FLASH设置透明:
复制内容到剪贴板 程序代码
<a href="">:</a>
<pre lang="html" line="1">
<param name="wmode" value="transparent" />
四、怎样使一个层垂直居中于浏览器中？
复制内容到剪贴板 程序代码
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
五、关于IE6样式中背景图片不缓存的BUG
示例：
复制内容到剪贴板 程序代码
a{ background:url(images/normal.gif); } a:hover { background:url(images/hover.gif); }
如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片；
而IE6在这里有一个bug，它每次都从服务器端读取背景图片，结果就是，若服务器反应较慢hover效果就会出现短暂的空白，令人极度不爽。 一直以来都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的，效果差强人意。
具体来说就是在页面中加入一段简单的脚本，告诉ie6：本地有背景图片的话就不要麻烦服务器了。 document.execCommand("BackgroundImageCache",false,true);
关于这段脚本的放置方式有两种：
1.用CSS，在css中加入如下代码
html {}{ filter: expression(document.execCommand("BackgroundImageCache", false, true)); }
2.用：document.execCommand("BackgroundImageCache",false,true);
如下：
复制内容到剪贴板 程序代码
<!--[if IE 6]>
<script>
document.execCommand("BackgroundImageCache", false, true);
</script>
<![endif]-->