最新消息:新的一年,启动新的宽屏主题模版,关注更多的web前端!

各种CSS bug与技巧,掌握这些能帮你修改大部分常见的IE浏览器bug

网络技术 amason 2607浏览 0评论

1、容器不扩展问题
这个是经常在我切图的时候遇到的问题,如:
[CODE_HTML]



容器不扩展问题

子容器a
子容器b

[/CODE_HTML]
解决办法:在divGroup里面加上overflow:hidden;zoom:1;
ps:很多人都是在里面加个清除浮动空标签来解决,其实这个是错误办法。太增加代码量了

2、margin双边距问题

[CODE_HTML]



FF下如何使连续长字段自动换行



www.liushen.net www.liushen.net www.liushen.net www.liushen.net

[/CODE_HTML]

设置为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则会忽略.如下
.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 这句放置在另一句之上。

6、IE6躲猫猫bug

[CODE_HTML]



躲猫猫bug

躲猫猫bug

躲猫猫bug

这个示例是为了演示IE6的“躲猫猫bug”,如果你用IE6浏览器浏览这个页面的时候,就会发现你看不到这些字了 囧rz~ 。

IE7已经修正了这个bug,所以你用IE7浏览这个页面的时候,就能看到这些文字啦。

躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫b躲猫猫b躲猫猫bugug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫b躲猫猫bug躲猫猫bug躲猫猫bugug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug

[/CODE_HTML]

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

技术

7、ie6下空标签高度问题

一个空div如果高度设置为0到19px,IE6下高度默认始终19PX。
例如:
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}class=”c”>

[CODE_HTML]


ie6下line-height bug

[/CODE_HTML]

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

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

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

<div class="c"> </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、加入收藏代码:

<script> 
function addfavorite() 

if (document.all) 

window.external.addFavorite(’http://bbs.blueidea.com’,'经典论坛’); 

else if (window.sidebar) 

window.sidebar.addPanel(’经典论坛’, ‘http://bbs.blueidea.com’, ""); 


</script> 
<a href="#"
onclick="addfavorite()">把经典论坛加入收藏</a>

14、通过定义em实现小三角效果:

* { 
font-size:14px;/* 必须通配字体大小 */ 
}
em { 
display:block; 
font:0/0 "宋体";/* 经本人摸索,只有在宋体下才最为标准 */ 
border:7px solid;/* border值越大,三角形越大 */ 
border-color:#fff #fff #fff #444;/* 通过改变颜色值,可产生不同效果,自己实验 */ 
margin-top:5px 
}

15、IE6下当层高低于10px时,会出现高度在定义值上加10px的效果,最简单的方法就是在该层样式中加入:

font-size:0;

16、空div在IE(FF中没有)是有默认高度的,可以用定义:

div { width:100%; background:#9c0; ling-height:0}

17、描边文字效果:

<div style="position:relative; width:200px; height:25px; line-height:25px; text-align:center; font-size:14px; color:#fff; background:#9c0;"> 
这是描边文字<span style="position:absolute; left:-1px; top:-1px; color:#444;width:200px; height:25px; display:block">这是描边文字</span> 
</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样式就不出现的问题:

[CODE_HTML]



超链接访问过后hover样式就不出现的问题


www.hemin.cn–www.hemin.cn

[/CODE_HTML]

ps:被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A (方便记忆的方法: love hate L-V-H-A

21、FF下如何使连续长字段自动换行:

[CODE_HTML]



FF下如何使连续长字段自动换行


aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

[/CODE_HTML]

ps:众所周知IE中直接使用word-wrap:break-word 就可以了, 这里FF中我们使用JS插入的方法来解决

22、IE6下为什么图片下方有空隙产生:

[CODE_HTML]



IE6下为什么图片下方有空隙产生

google

[/CODE_HTML]
ps:解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block
或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom
都可以解决.

23、 IE6下这两个层中间怎么有间隙:

[CODE_HTML]



IE6下这两个层中间怎么有间隙


aaaaaa
aaaaaa

[/CODE_HTML]

ps:这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

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

[CODE_HTML]



ist-style-image无法准确定位的问题


发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址