各种CSS bug与技巧
1、容器不扩展问题
这个是经常在我切图的时候遇到的问题，如：
解决办法：在divGroup里面加上overflow:hidden;zoom:1;
ps:很多人都是在里面加个清除浮动空标签来解决，其实这个是错误办法。太增加代码量了
2、margin双边距问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决办法是在这个div里面加上display:inline;
ps:我一般很少用margin，一般情况用padding来控制边距，以免出现另外的bug
3、关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
4、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事
5、最狠的手段 – !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下
1. .tabd1{
2. background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
3. background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上。
6、IE6躲猫猫bug
9、按钮按下时立体感效果:
a:hover { position:relative; top:1px; left:1px}/* 切记一定要是相对定位 */
10、整站变灰代码(加到样式表中):
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
11、中英文下划线对齐方式(利用图片的align=”absmiddle”):
<img src="img.gif" align="absmiddle">中英文并排:<a href="/">中文 gollum</a>
12、设为首页代码:
<span onclick="var strHref=window.location.href;this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.poluoluo.com 破洛洛’);" style="cursor:pointer">设为首页</span>
13、加入收藏代码:
1. <script>
2. function addfavorite()
3. {
4. if (document.all)
5. {
6. window.external.addFavorite(‘http://www.poluoluo.com‘,‘破洛洛‘);
7. }
8. else if (window.sidebar)
9. {
10. window.sidebar.addPanel(‘破洛洛‘, ‘http://www.poluoluo.com‘, "");
11. }
12. }
13. </script>
14. <a href="#" onclick="addfavorite()">把破洛洛加入收藏</a>
14、通过定义em实现小三角效果:
1. * {
2. font-size:14px;/* 必须通配字体大小 */
3. }
4. em {
5. display:block;
6. font:0/0 "宋体";/* 经本人摸索,只有在宋体下才最为标准 */
7. border:7px solid;/* border值越大,三角形越大 */
8. border-color:#fff #fff #fff #444;/* 通过改变颜色值,可产生不同效果,自己实验 */
9. margin-top:5px
10. }
15、IE6下当层高低于10px时,会出现高度在定义值上加10px的效果,最简单的方法就是在该层样式中加入:
font-size:0;
16、空div在IE(FF中没有)是有默认高度的,可以用定义:
div { width:100%; background:#9c0; ling-height:0}
17、描边文字效果:
1. <div style="position:relative; width:200px; height:25px; line-height:25px; text-align:center; font-size:14px; color:#fff; background:#9c0;">
2. 这是描边文字<span style="position:absolute; left:-1px; top:-1px; color:#444;width:200px; height:25px; display:block">这是描边文字</span>
3. </div>
18、input鼠标经过时改变颜色:
input {star : expression(onmouseover=function(){this.style.backgroundColor=”#FF0000″},onmouseout=function(){this.style.backgroundColor=”#FFFFFF”}) }
19、图片在容器里垂直居中显示:
img {margin-top: expression(( 150 – this.height ) / 2);} //150是容器高
20、超链接访问过后hover样式就不出现的问题:
ps:被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A
21、FF下如何使连续长字段自动换行:
ps:众所周知IE中直接使用word-wrap:break-word 就可以了, 这里FF中我们使用JS插入的方法来解决
22、IE6下为什么图片下方有空隙产生:
ps:解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block
或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom
都可以解决.
23、 IE6下这两个层中间怎么有间隙:
ps:这个list-style-image的定位问题也是经常有人问的，解决的办法一般是用li的背景模拟，这里采用相对定位的方法也可以解决
25、如何对齐文本与文本输入筐:
ps:遇到此种问题，设置文本框的vertical-align:middle 就可以了
26、为什么web标准中IE无法设置滚动条颜色了:
ps:解决办法是将body换成html
27、怎么样才能让层显示在FLASH之上呢:
ps:解决的办法是给FLASH设置透明
<param name="wmode" value="transparent" />
28、怎样使一个层垂直居中于浏览器中:
ps:这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
29、直通到屏幕底部的背景色:
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：
#navigation { background: blue; width: 150px }
较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？
不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
body { background: url(blue-image.gif) 0 0 repeat-y }
此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。
30、CSS透明属性:
.transparent_class {
filter:alpha(opacity=50);/*; 这个是为IE6设的，可取值在0-100，其它三个0到1. */
-moz-opacity:0.5;/*这个是为了支持一些老版本的Mozilla浏览器。*/
-khtml-opacity: 0.5;/*这个为了支持一些老版本的Safari浏览器。 */
opacity: 0.5;/*opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera. */
}
31、CSS字体属性简写规则
一般用CSS设定字体属性是这样做的：
1. font-weight:bold;
2. font-style:italic;
3. font-varient:small-caps;
4. font-size:1em;
5. line-height:1.5em;
6. 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 ，他们会使用缺省值，这点要记上。
32、修正IE6重复文字bug:
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)" />
<a href="http://www.poluoluo.com 破洛洛">hemin</a>
37、IE6下英文字体跟中文字体不能对齐:
解决办法：中英文都统一使用“宋体”。
尊重别人的劳动成功，来源：破落落 http://www.poluoluo.com/jzxy/200911/70685.html
