`

CSS 精华-BUG 修复

    博客分类：
  • Css
CSSIEHTMLFirebugXHTML 
阅读更多

大部分BUG是人为的

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

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


IMG与 line-height冲突 


 <style type="text/css">
    div.v-align {
      border: 1px solid red;
      height: 200px;
      line-height: 200px;
      float: left;
    }
    div.v-align img {
      padding-top: 90px; /* fix bug */
      vertical-align: middle;
    }
  </style>

  <div class="v-align">
    正常
  </div>
  <div class="v-align">
    <img src="./accept.png" />
  </div>


例子1: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
  <style type="text/css">
    div.v-align {
      border: 1px solid red;
      line-height: 40px;
      float: left;
      font-size: 11px;
      height: 40px;
    }
    div.v-align img.only-img {
      float:left;
    }
    div.v-align.has-img {
      padding-top: 10px;
      height: 30px;
    }

    div.v-align.has-img-and-text img.has-text {
      vertical-align: -4px !important;
      vertical-align: middle;
      margin-top: -3px !important;
      margin-top: 0px;
    }
    div.v-align.has-img-and-text {
      padding-top: 0px !important;
      padding-top: 10px;
      height: 40px !important;
      height: 30px;
    }
  </style>
<!--[if IE]>

<![endif]-->
</head>
<body>
  <div class="v-align">
    正常
  </div>
  <div class="v-align has-img">
    <img src="./accept.png" class="only-img" />
  </div>
  <div class="v-align has-img-and-text">
    <img src="./accept.png" align="absmiddle" class="has-text" />有图片有字
  </div>
</body>
</html>


绝对定位 right 
 <style type="text/css">
    div.box {
      border: 1px solid red;
      background-color: black;
      height: 200px;
      position: relative;
    }
    div.box img {
      position: absolute;
      right: 0px !important;
      right: -1px; /* fix IE 6 */
      border: 1px solid white;
    }
  </style>

  <div class="box">
    <img src="./accept.png" />
  </div


例子2: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
  <style type="text/css">
    div.box {
      border: 1px solid red;
      background-color: black;
      height: 200px;
      position: relative;
      padding:0px;
    }
    div.box img {
      position: absolute;
      right: 0px !important;
      right: -1px; /* fix IE 6 */
      border: 1px solid white;
    }
  </style>
<!--[if IE]>

<![endif]-->
</head>
<body>
  <div class="box">
    <img src="./accept.png" />
  </div>
</body>
</html>


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

<style type="text/css">
    div.box {
      border: 1px solid red;
      background-color: #ccc;
      height: 200px;
      width: 400px
    }
    div.box .item {
      border: 1px solid blue;
      float: left;
      margin-left: 20px;
      display: inline; /* Fix for IE 6 */
    }
</style>

<div class="box">
    <div class="item">
      Content
    </div>
  </div>


例子3: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
  <style type="text/css">
    div.box {
      border: 1px solid red;
      background-color: #ccc;
      height: 200px;
      width: 400px
    }
    div.box .item {
      border: 1px solid blue;
      float: left;
      margin-left: 20px;
      /*display: inline; /* Fix for IE 6 */*/
    }
  </style>
<!--[if IE]>

<![endif]-->
</head>
<body>
  <div class="box">
    <div class="item">
      Content
    </div>
  </div>
</body>
</html>


莫名其妙的 3px BUG（IE6-) 
<style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    div.box {
      border: 1px solid #ccc;
      margin: 0;
      padding: 0px;
      float: left;
      width: 100px;
      height: 50px;
      margin-right: 0px !important;
      margin-right: -3px;
    }
  </style>

  <div class="box">
  </div>
  <p>
  莫名其妙的3px
  </p>


例子4: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    div.box {
      border: 1px solid #ccc;
      margin: 0;
      padding: 0px;
      float: left;
      width: 100px;
      height: 50px;
      margin-right: 0px !important;
      margin-right: -3px;
    }
  </style>
<!--[if IE]>

<![endif]-->
</head>
<body>
  <div class="box">
  </div>
  <p>
  莫名其妙的3px
  </p>
</body>
</html>


当出现BUG时用border标出容器 

<style type=“text/css”>
	div.parent-box {
		 border: 1px sold red; /* Use border and different color*/
   }
	div.child-box {
		 border: 1px sold green; /* Use border and different color*/
   }
</style>
<div class=“parent-box”>
  <div class=“child-box”></div>
</div>


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












分享到：
| CSS 精华-Why CSS?
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    商业编程-源码-ZTJMessage留言板系统 v2.5.0.zip

    v2.5.0版本的更新可能包括性能优化、bug修复以及新功能的添加，例如： - 性能优化：减少数据库查询次数，缓存策略的改进，提升页面加载速度。 - 兼容性增强：支持更多的浏览器和设备，提高用户体验。 - 新功能：如...

    jquery-1.5.1.min.js

    7. **版本历史**：jQuery 1.5.1发布于2011年，相对于1.5版本，它修复了一些已知的bug，增强了性能，提供了更好的浏览器兼容性，确保在不同环境下稳定运行。 8. **版本选择**：虽然现在jQuery已经有更新的版本，但...

    jquery-1.9.1.min.js

    这一版本修复了许多已知的bug，并引入了一些关键性的改进，使得开发者在处理DOM操作、事件绑定、动画效果等方面有了更好的体验。 一、核心功能 1. DOM操作：jQuery提供了丰富的选择器，使得开发者能轻松地选取DOM...

    科汛Kesion Eshop v5.0 UTF-8正式版

    35、修复模型的自定义字段，选择多行文本时，高度被css控**的问题 36、修复在会员中心中,修改详细信息时,真实姓名和******号码不能保存 37、修复生成google地图出错 38、修复cc视频无法插入的bug 39、修复space/...

    科汛Kesion CMS v5.0 UTF-8正式版

    35、修复模型的自定义字段，选择多行文本时，高度被css控**的问题 36、修复在会员中心中,修改详细信息时,真实姓名和******号码不能保存 37、修复生成google地图出错 38、修复cc视频无法插入的bug 39、修复space/...

    科汛Kesion Eshop v5.0 GBK正式版

    35、修复模型的自定义字段，选择多行文本时，高度被css控**的问题 36、修复在会员中心中,修改详细信息时,真实姓名和******号码不能保存 37、修复生成google地图出错 38、修复cc视频无法插入的bug 39、修复space/...

    PHPWind 逝去年代模板

    - **定期更新**：关注PHPWind官方发布的模板更新，以获取修复的bug和新增的功能。 - **性能优化**：检查并优化CSS、JavaScript代码，减少HTTP请求，提升页面加载速度。 - **SEO优化**：确保模板符合搜索引擎优化...

    科汛Kesion CMS v5.0 GBK正式版

    35、修复模型的自定义字段，选择多行文本时，高度被css控**的问题 36、修复在会员中心中,修改详细信息时,真实姓名和******号码不能保存 37、修复生成google地图出错 38、修复cc视频无法插入的bug 39、修复space/...

    dz论坛4格 完美显示图片

    7.x是其一个主要的版本系列，而0.1.2则可能是该系列中的一个小版本迭代，通常涉及到性能优化、bug修复或新功能的添加。 描述中的“首页四格”是指论坛首页的一种布局设计。这种设计通常是为了优化用户体验，将四个...

    PHPWind 悠然蓝天模板

    在使用过程中，管理员应关注模板的兼容性，确保其与PHPWind的当前版本匹配，并定期检查更新，以获取修复的bug和新增的功能。同时，了解和掌握PHPWind的模板语言和HTML/CSS基础知识将有助于对模板进行个性化调整。 ...

    discuz薇晓朵精仿OPPO社区模板

    同时，为了保持模板的正常运行，用户还需要定期更新模板文件，以修复可能存在的bug并获取新的功能。 总的来说，Discuz薇晓朵精仿OPPO社区模板是Discuz论坛用户提升社区形象、增加用户黏性的有效工具。它的成功应用...

    W3C联盟系统-PHP

    修复已知模板bug 对html在线运行进行优化 个别不能识别运行 新增对插件兼容 新增一键获取自定义过滤 内容详情页，描述进行优化 新增单页自动生成文件 在线文件编辑  修复后台模板手机管理出现遮挡 修复单页数据统计...

    BBS论坛源码

    后期的维护工作包括更新、修复bug、添加新功能以及定期的数据备份。 9. **社区互动设计**：良好的论坛设计应该包含积分系统、等级体系、热门话题推荐、精华贴标识等功能，以增强用户参与度和社区活跃度。 10. **可...

    W3C联盟系统 v1.3

    W3C联盟系统是一个收集展现web技术教程等系统，完美的展现给用户最好的简单学习一的一面，布局等优化借鉴了菜鸟教程的精华，在线调试预览 用户体验放到第一位,非常符合当代站长的阅读学习等，主要使用功能等在详细...

Magicbox
Global site tag (gtag.js) - Google Analytics