编程中遇到的有关CSS的错误解决方法小汇

在编程中遇到问题，将解决方法纪录在这里

1.htm页面正常显示CSS样式，但是JSP页面中无法正常显示出所有的CSS，更诡异的是不是完全显示不了，而是一部分显示不出来。经过多次对比，从页面上代码完全相同，但是显示却不一样。

最后终于在CSS文件里面找到原因，在CSS文件相关的CSS定义前有一些中文注释，而这些注释可能服务器无法正常解读。我用eclipse打开是乱码。将这些中文注释去掉。问题解决。

2.

css 代码



button{  



   
background-color
:
#00CC00
;  


   
text-decoration
:
none
;  


   
padding
:
3px
;  


   
color
:
#FFFFFF
;  


   
font-size
:
10px
;  


   
border
:
none
;   
/*默认的边框太丑了，没边框更好看一点*/
 


} 


这个代码实现的按钮效果就是类似与javaeye的按钮了。按钮都有一个默认的边框，如果设置了颜色，那个框看起来会很丑。

3.

css 代码



img{  



   
border
:0;
/*IE显示BUG，会给图片链接加上链接边框*/
 


} 


虽然我们在a这个标签的CSS里面设置了text-decoration:none;但是在IE中，如果做了一个点击图片的链接，图片旁边会出现蓝色的边框，将border设为0可以解决。


4.tooltip,鼠标滑过会显示出一个提示的CSS代码


css 代码




/*-----------tooltip implement--------------*/
 



a.tooltip{  


   
position
:
relative
;  


}  


a.tooltip span{  


   
display
:
none
;  


}  


a.tooltip:hover span{  


   
display
:
block
;  


   
position
:
absolute
;  


   
top
:1em;  


   
left
:10em;  


   
padding
:0.2em 0.6em;  


   
border
:
1px

solid

#996633
;  


   
background-color
:
#00CC00
;  


   
color
:
#FFFFFF
;  


   
width
:20em;  


}  


/*由于IE的BUG必须添加一个像背景色的属性才能在IE正



常显示提示，transparent表示链接不变色，设置Z值保



证提示显示在最前，不会因为跟其他层处于同一层而层



叠在一起影响浏览效果*/
 



a.tooltip:hover{  


   
background-color
:
transparent
;  


   
z-index
: 1;  


}    










5.Checkbox默认在IE下会显示有间距,分别是

上:4px,右3px,下3px,左4px,而在Firefox等浏览器下没有.

要解决兼容,就需要在Firefox等浏览器下补上margin.


input {margin:4px 3px 3px 4px; *margin:0}