logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

CSS BUG

 歪SIR 2011-07-24
大部分BUG是人为的

CSS 编写不规范，语法错误可以用 W3C CSS 检验器
http://jigsaw./css-validator/

选择器特殊性问题,可以用FireBug解决


IMG与 line-height冲突


Html代码  收藏代码
  1. <style type="text/css">  
  2.    div.v-align {  
  3.      border: 1px solid red;  
  4.      height: 200px;  
  5.      line-height: 200px;  
  6.      float: left;  
  7.    }  
  8.    div.v-align img {  
  9.      padding-top: 90px; /* fix bug */  
  10.      vertical-align: middle;  
  11.    }  
  12.  </style>  
  13.   
  14.  <div class="v-align">  
  15.    正常  
  16.  </div>  
  17.  <div class="v-align">  
  18.    <img src="./accept.png" />  
  19.  </div>  


例子1:
Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml" xml:lang="en">  
  3. <head>  
  4. <title>AgiCRM</title>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  6. <meta name="demo" content="Demo" />  
  7. <meta name="demo" content="demo" />  
  8.   <style type="text/css">  
  9.     div.v-align {  
  10.       border: 1px solid red;  
  11.       line-height: 40px;  
  12.       float: left;  
  13.       font-size: 11px;  
  14.       height: 40px;  
  15.     }  
  16.     div.v-align img.only-img {  
  17.       float:left;  
  18.     }  
  19.     div.v-align.has-img {  
  20.       padding-top: 10px;  
  21.       height: 30px;  
  22.     }  
  23.   
  24.     div.v-align.has-img-and-text img.has-text {  
  25.       vertical-align: -4px !important;  
  26.       vertical-align: middle;  
  27.       margin-top: -3px !important;  
  28.       margin-top: 0px;  
  29.     }  
  30.     div.v-align.has-img-and-text {  
  31.       padding-top: 0px !important;  
  32.       padding-top: 10px;  
  33.       height: 40px !important;  
  34.       height: 30px;  
  35.     }  
  36.   </style>  
  37. <!--[if IE]>  
  38.   
  39. <![endif]-->  
  40. </head>  
  41. <body>  
  42.   <div class="v-align">  
  43.     正常  
  44.   </div>  
  45.   <div class="v-align has-img">  
  46.     <img src="./accept.png" class="only-img" />  
  47.   </div>  
  48.   <div class="v-align has-img-and-text">  
  49.     <img src="./accept.png" align="absmiddle" class="has-text" />有图片有字  
  50.   </div>  
  51. </body>  
  52. </html>  


绝对定位 right
Html代码  收藏代码
  1. <style type="text/css">  
  2.    div.box {  
  3.      border: 1px solid red;  
  4.      background-color: black;  
  5.      height: 200px;  
  6.      position: relative;  
  7.    }  
  8.    div.box img {  
  9.      position: absolute;  
  10.      right: 0px !important;  
  11.      right: -1px; /* fix IE 6 */  
  12.      border: 1px solid white;  
  13.    }  
  14.  </style>  
  15.   
  16.  <div class="box">  
  17.    <img src="./accept.png" />  
  18.  </div  


例子2:
Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml" xml:lang="en">  
  3. <head>  
  4. <title>AgiCRM</title>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  6. <meta name="demo" content="Demo" />  
  7. <meta name="demo" content="demo" />  
  8.   <style type="text/css">  
  9.     div.box {  
  10.       border: 1px solid red;  
  11.       background-color: black;  
  12.       height: 200px;  
  13.       position: relative;  
  14.       padding:0px;  
  15.     }  
  16.     div.box img {  
  17.       position: absolute;  
  18.       right: 0px !important;  
  19.       right: -1px; /* fix IE 6 */  
  20.       border: 1px solid white;  
  21.     }  
  22.   </style>  
  23. <!--[if IE]>  
  24.   
  25. <![endif]-->  
  26. </head>  
  27. <body>  
  28.   <div class="box">  
  29.     <img src="./accept.png" />  
  30.   </div>  
  31. </body>  
  32. </html>  


双倍空白边浮动BUG（IE6-）

Html代码  收藏代码
  1. <style type="text/css">  
  2.     div.box {  
  3.       border: 1px solid red;  
  4.       background-color: #ccc;  
  5.       height: 200px;  
  6.       width: 400px  
  7.     }  
  8.     div.box .item {  
  9.       border: 1px solid blue;  
  10.       float: left;  
  11.       margin-left: 20px;  
  12.       display: inline; /* Fix for IE 6 */  
  13.     }  
  14. </style>  
  15.   
  16. <div class="box">  
  17.     <div class="item">  
  18.       Content  
  19.     </div>  
  20.   </div>  


例子3:
Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml" xml:lang="en">  
  3. <head>  
  4. <title>AgiCRM</title>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  6. <meta name="demo" content="Demo" />  
  7. <meta name="demo" content="demo" />  
  8.   <style type="text/css">  
  9.     div.box {  
  10.       border: 1px solid red;  
  11.       background-color: #ccc;  
  12.       height: 200px;  
  13.       width: 400px  
  14.     }  
  15.     div.box .item {  
  16.       border: 1px solid blue;  
  17.       float: left;  
  18.       margin-left: 20px;  
  19.       /*display: inline; /* Fix for IE 6 */*/  
  20.     }  
  21.   </style>  
  22. <!--[if IE]>  
  23.   
  24. <![endif]-->  
  25. </head>  
  26. <body>  
  27.   <div class="box">  
  28.     <div class="item">  
  29.       Content  
  30.     </div>  
  31.   </div>  
  32. </body>  
  33. </html>  


莫名其妙的 3px BUG（IE6-)
Html代码  收藏代码
  1. <style type="text/css">  
  2.     * {  
  3.       margin: 0;  
  4.       padding: 0;  
  5.     }  
  6.     div.box {  
  7.       border: 1px solid #ccc;  
  8.       margin: 0;  
  9.       padding: 0px;  
  10.       float: left;  
  11.       width: 100px;  
  12.       height: 50px;  
  13.       margin-right: 0px !important;  
  14.       margin-right: -3px;  
  15.     }  
  16.   </style>  
  17.   
  18.   <div class="box">  
  19.   </div>  
  20.   <p>  
  21.   莫名其妙的3px  
  22.   </p>  


例子4:

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml" xml:lang="en">  
  3. <head>  
  4. <title>AgiCRM</title>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  6. <meta name="demo" content="Demo" />  
  7. <meta name="demo" content="demo" />  
  8.   <style type="text/css">  
  9.     * {  
  10.       margin: 0;  
  11.       padding: 0;  
  12.     }  
  13.     div.box {  
  14.       border: 1px solid #ccc;  
  15.       margin: 0;  
  16.       padding: 0px;  
  17.       float: left;  
  18.       width: 100px;  
  19.       height: 50px;  
  20.       margin-right: 0px !important;  
  21.       margin-right: -3px;  
  22.     }  
  23.   </style>  
  24. <!--[if IE]>  
  25.   
  26. <![endif]-->  
  27. </head>  
  28. <body>  
  29.   <div class="box">  
  30.   </div>  
  31.   <p>  
  32.   莫名其妙的3px  
  33.   </p>  
  34. </body>  
  35. </html>  


当出现BUG时用border标出容器

Html代码  收藏代码
  1. <style type=“text/css”>  
  2.     div.parent-box {  
  3.          border: 1px sold red; /* Use border and different color*/  
  4.    }  
  5.     div.child-box {  
  6.          border: 1px sold green; /* Use border and different color*/  
  7.    }  
  8. </style>  
  9. <div class=“parent-box”>  
  10.   <div class=“child-box”></div>  
  11. </div>  


修复问题，而不是修复症状
知道问题根源后，再根据这个根源去修复，
否则会是治标不治本
像本课程 IMG 与 line-height 冲突还只是治标,
还不知道其真正原因

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 歪SIR > 《CSS》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多