2007-06-16

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

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

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

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

2.

css 代码
  1. button{   
  2.     background-color:#00CC00;   
  3.     text-decoration:none;   
  4.     padding:3px;   
  5.     color:#FFFFFF;   
  6.     font-size:10px;   
  7.     border:none;    /*默认的边框太丑了，没边框更好看一点*/  
  8. }  

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

3.

css 代码
  1. img{   
  2.     border:0;/*IE显示BUG，会给图片链接加上链接边框*/  
  3. }  

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

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

 

css 代码
  1. /*-----------tooltip implement--------------*/  
  2. a.tooltip{   
  3.     position:relative;   
  4. }   
  5. a.tooltip span{   
  6.     display:none;   
  7. }   
  8. a.tooltip:hover span{   
  9.     display:block;   
  10.     position:absolute;   
  11.     top:1em;   
  12.     left:10em;   
  13.     padding:0.2em 0.6em;   
  14.     border:1px solid #996633;   
  15.     background-color:#00CC00;   
  16.     color:#FFFFFF;   
  17.     width:20em;   
  18. }   
  19. /*由于IE的BUG必须添加一个像背景色的属性才能在IE正  
  20. 常显示提示，transparent表示链接不变色，设置Z值保  
  21. 证提示显示在最前，不会因为跟其他层处于同一层而层  
  22. 叠在一起影响浏览效果*/  
  23. a.tooltip:hover{   
  24.     background-color:transparent;   
  25.     z-index: 1;   
  26. }     
评论
playfish
搜索本博客
最近加入圈子
存档
最新评论