Loading...

此页面上的内容需要较新版本的 Adobe Flash Player。

获取 Adobe Flash Player
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
 
首页 > (x)Html/Css> 各种CSS bug与技巧 更新为2010.3.5

各种CSS bug与技巧 更新为2010.3.5

设置字体: 小   中   大

最近很忙，估计要到8月8号才会忙完啊，今天休息抽空出来弄下收集的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

提示：你可以先修改部分代码再运行。

下面方法的任意一种即可消灭bug：
1.明确的指定最外面div容器（#holder）的宽度（相对宽度和绝对宽带都可以）。
2.去掉最外面div容器（#holder）的背景颜色（或者背景图片）
3.缩小浮动div容器（#floater）的高度到一定程度
4.不浮动div容器（#floater）
5.不使用

<div class="clear"><div>

技术
7、ie6下空标签高度问题
一个空div如果高度设置为0到19px，IE6下高度默认始终19PX。
例如：

.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}
<div class="c"></div>

运行：

提示：你可以先修改部分代码再运行。

如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.css里面加上overflow:hidden;
2.div里面加上注释,

<div class="c"><!– –></div>

3.css里面加上line-height:0;然后div里面加上#nbsp;,

<div class="c">&nbsp;</div>(#换成&)

注意：ie6下给div设置的高度小于ie6的line-height值时,ie6会将这个div的高度定为line-height的值.
8、去掉图片热点链接或超链接的虚线框

<a href="#" onFocus=this.blur()>hemin</a>

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.hemin.cn’);" style="cursor:pointer">设为首页</span>

13、加入收藏代码:

  1. <script>
  2. function addfavorite()
  3. {
  4.    if (document.all)
  5.    {
  6.       window.external.addFavorite(‘http://bbs.blueidea.com‘,‘经典论坛‘);
  7.    }
  8.    else if (window.sidebar)
  9.    {
  10.       window.sidebar.addPanel(‘经典论坛‘, ‘http://bbs.blueidea.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:这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

24、list-style-image无法准确定位的问题:

提示：你可以先修改部分代码再运行。

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:

提示：你可以先修改部分代码再运行。

解决方法：
# 去掉注释
# 确保所有的元素使用”display:inline;”
# 在最后一个元素上使用一个”margin-right:-3px;”
# 为浮动元素的最后一个条目使用一个条件注释，比如：

<!–[if !IE]>Put your commentary in here…<![endif]–>

#在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
原文:www.positioniseverything.net

33、 IE6下:hover失效问题解决方案 :

a:hover{zoom:1} /*增加zoom, display, padding等等属性也可*/

34、IE6,7失效的margin-left/right bug:

提示：你可以先修改部分代码再运行。

解决办法:在wrap加zoom:1;
转：http://www.cssass.com/blog/index.php/2009/350.html/comment-page-1#comment-128

35、单行或多行始终文字垂直居中:

提示：你可以先修改部分代码再运行。

36、进入网页加入渐显切换效果:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)" />
<a href="http://www.hemin.cn">hemin</a>

37、IE6下英文字体跟中文字体不能对齐:
解决办法：中英文都统一使用“宋体”。

38、FF和IE6的(&)nbsp区别问题:
FF和IE6的(&)nbsp，空格宽度为什么不一样啊？如何才可以一样？
1:输入法设置为全角
2.字体设置为宋体

39、ie6下实现position-fixed效果 :

提示：你可以先修改部分代码再运行。

40、IE6下ol li序号重复为1 bug:

提示：你可以先修改部分代码再运行。

解决方案：去掉.arcnt ol li下的高度宽度。

41、IE6 1px 奇偶数 BUG:

提示：你可以先修改部分代码再运行。

查看问题请放大浏览器倍数。

问题解决：

  1. left:-100%; margin-left:100%;
  2. right:-100%; margin-right:100%;

换成

  1. left:100%; margin-left:-100%;
  2. right:100%; margin-right:-100%;

42、…..:
续写。。。

作者：He Min
出处：http://www.hemin.cn
本文版权所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

相关文章：

七月 29th, 2009 in (x)Html/Css | tags: , , | 1,988 次浏览
« ：较新一篇
较老一篇： »


11 Comments

  1. 丸子 说：
    2009/08/02于1:21 上午

    ps:很多人都是在里面加个清除浮动空标签和字体大小设置为0来解决，其实这个是错误办法。太增加代码量了
    介个是什么意思呀?

    [回复]

    hemin 回复:
    八月 2nd, 2009 at 1:33 上午

    如：

    1. clear:both
    2. <div class="clear"></div>

    [回复]

  2. 无悠阁 说：
    2009/08/02于11:43 上午

    好东西。

    [回复]

  3. stri 说：
    2009/08/16于9:16 上午

    第19条不对
    第23条明明是3pxBUG,浮动就可以解决.

    [回复]

  4. stri 说：
    2009/08/16于9:18 上午

    还有第五条.由于IE8的出现,这个hack几乎没用啦吧!

    [回复]

  5. cssbox 说：
    2009/08/17于8:59 上午

    不错不错…收藏先…

    [回复]

  6. 小小 说：
    2009/10/31于3:59 下午

    不错. 很受益

    [回复]

  7. nianshi 说：
    2009/11/03于10:24 上午

    学习了 多谢楼主分享。。。

    [回复]

  8. soit 说：
    2009/11/12于11:50 上午

    博主 ： 第26个例子 文本框里面的文字垂直居中怎么弄啊 在FF里 尽快回复 thanks

    [回复]

    hemin 回复:
    十一月 12th, 2009 at 12:30 下午

    @soit,
    看这个http://www.hemin.cn/blog/?p=270

    [回复]

  9. superjunwen 说：
    2009/11/15于12:07 上午

    face1今天发现了这个博客，如获至宝！感谢楼主的分享~~~

    [回复]

Leave a comment

Your comment

1; 2; 3; 4; 5; 6; 7; 8; 9; 10; 11; 12; 13; 14; 15; 16; 17; 18; 19; 20; 21; 22;

增大 | 减小输入框高度: + | –


↑TOP↓BOTTOM