CSS 精华-BUG 修复

最新推荐文章于 2022-07-08 20:27:39 发布

JimJin

最新推荐文章于 2022-07-08 20:27:39 发布

阅读量218

点赞数

分类专栏： Css 文章标签： CSS IE HTML Firebug XHTML

本文链接：https://blog.csdn.net/JimJin/article/details/83483961

版权

Css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[b][size=small]大部分BUG是人为的[/size][/b]

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

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

[size=small][b]IMG与 line-height冲突[/b][/size]

 <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>

[b][size=small]绝对定位 right[/size][/b]

 <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>

[b][size=small]双倍空白边浮动BUG（IE6-）[/size][/b]

<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>

[b][size=small]莫名其妙的 3px BUG（IE6-)[/size][/b]


<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>

[b][size=small]当出现BUG时用border标出容器[/size][/b]


<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>