大部分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---css广告------css---css
pro-html5-css3-design-patterns-master
前端开源库-postcss-css-variablespostcss css变量,postcss插件,用于将css自定义属性(css变量)语法转换为静态表示形式
css3d-engine, css 3d 轻型引擎很容易使用 14k css3d-enginehttps://github.com/shrekshrek/css3d-matrix-es6具体使用请看案例演示:http://shrek.imdevsh.com/demo/css3d/spa
HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 ...
css-cheat-sheet,css-cheat-sheet,css-cheat-sheet
PHPCMS V9后台模板MunSkin v1.2 by 蒙奇时光--好用--修复bug: PHPCMS V9的后台模板已经比较高大上了,但看久了还是难免还是有些不满足,也许已经有很多人改过了,但目前分享出来的没有几个,一方面是个人原因不想...
CSS--文本溢出完美样式,CSS--文本溢出完美样式,CSS--文本溢出完美样式
HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度...
postcss-flexbugs-fixes, PostCSS插件,试图修复flexbug的所有问题 PostCSS Flexbugs修复 这个项目试图修复所有问题的插件。 Bug 4输入.foo { flex: 1; }.bar { flex: 1 1; }.foz { flex: 1 1 0; }.b
前端开源库-postcss-variablespostss变量,postss插件,用于将变量转换为css
响应式页面 引用的两个js 兼容ie8 ie7的html5标签与media属性 css3-mediaqueries.js html5.js
CSS--HTML--JAVASCRIPT语法表 CSS--HTML--JAVASCRIPT语法表
前端开源库-css-background-videoCSS背景视频,一个支持背景视频作为CSS属性的HTML5填充程序
css css样式--百度端午龙舟 百度logo,动态显示,人船同步显示。
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习...
npm install postcss-css-variables --save-dev 目录 -- ---嵌套规则 为什么? -互操作性-与postcss-custom-properties差异 注意事项 选项 快速参考/注释 测验 变更日志 代码游乐场 在操场上尝试一下,看看您的想法...
css--实现透明三角形(来自百度web前端工程师试题)
mini-css-extract-plugin-NS-bug 1 npm安装2 npm运行开始