CSS 精华-BUG 修复
大部分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><!--><!--></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><!--><!--></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><!--><!--></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><!--><!--></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 冲突还只是治标,
还不知道其真正原因
页:
[1]