常见bug及解决方案

1.外边距叠加

一.发生在一个div内

<!DOCTYPE>

<html>

<head>

<meta http-equiv=Content-Type content="text/html; charset=utf-8"/>

<style type="text/css">

*{

    padding: 0;

    margin: 0;

}

#box{

    margin: 10px;

    background-color: #d5d5d5;

}

#box p{

    margin: 20px;

    padding: 1px;

    background-color: #6699ff;

}

</style>

</head>

<body>

    <div id="box">

        <p>This is a pages</p>

    </div>

</body>

</html>

p中的margin20px覆盖div中的margin10px，使div的顶外边距和底外边距的margin为20px而内部p的顶外边距和底外边距的margin为0px

解决方案：设置一个padding值或背景颜色相同的边框。

二.发生在俩个div

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{

    padding: 0;

    margin: 0;

}

#div1{

    width: 1000px;

    height: 100px;

    border: 10px solid;

    padding: 50px;

    margin: 15px;

}

#div2{

    width: 1000px;

    height: 100px;

    border: 10px solid;

    padding: 50px;

    margin: 10px;

}

</style>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

</body>

</html>

只发生在普通文档流中，浮动与定位不会叠加。

2.当一个浮动元素与一个非浮动元素相连时就会出现IE6 3像素BUG

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

<head>

    <meta http-equiv="Content-Type" content="text/html;  charset=utf-8">

    <style type="text/css">

    *{margin: 0;padding: 0;}

    .bd{width: 400px;height: 400px;}

    .side{float: left;width: 100px;height: 200px;background: #333333;_margin-right: -3px;}

    .main{width: 200px;height: 100px;background: #555555;}

    </style>

    <title>解决3像素Bug</title>

</head>

<body>

    <div class="bd">

        <div class="side">

        </div>

        <div class="main">

        </div>

    </div>

</body>

</html>

在IE67中，当一个一个浮动元素与一个非浮动元素相连时，浮动的元素不会覆盖非浮动的元素。而在其他浏览器中会覆盖。

解决方案：1._margin-right: -3px(只解决IE6中3px的bug)；2.float:left(可以使所有浏览器的布局相同);推荐2

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

<head>

    <meta http-equiv="Content-Type" content="text/html;  charset=utf-8">

    <style type="text/css">

    *{margin: 0;padding: 0;}

    .parent{width: 500px;height: 500px;border: 1px solid #999999;}

    .child{float: right;margin-right: 10px;width: 300px;height: 300px;border: 1px solid #888888;display: inline;}

    </style>

    <title>解决双边距问题</title>

</head>

<body>

    <div class="parent">

        <div class="child">

        </div>

    </div>

</body>

</html>

满足以下两个条件会产生双边距问题：1、块级元素 2、同时对块级元素添加float: left margin-left或float: right margin-right样式。

此时margin-right(left)的值为原来的俩倍。

解决方案: 只要为块级元素添加display: inline转变为内联元素;

4.DOM元素的定位

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

<head>

    <meta http-equiv="Content-Type" content="text/html;  charset=utf-8">

    <style type="text/css">

    *{margin: 0; padding: 0;}

    .pic{width: 300px;height: 300px;}

    .fix{position: fixed;right: 30px;bottom: 30px;*position: absolute;_right: 29px;_bottom: 29px;}

    .img01{width: 300px;height: 300px;}

    </style>

    <title>DOM元素固定于屏幕某处</title>

</head>

<body>

    <div class="pic fix">

        <img class="img01" src="resource/Koala.jpg">

    </div>

</body>

</html>

IE6会把position: fixed看成是position: static(正常);

解决方案: 所以要重设position，_为IE6专用

5.文字溢出

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

<head>

    <meta http-equiv="Content-Type" content="text/html;  charset=utf-8">

    <style type="text/css">

    .container01{width: 400px}

    .container02{float: left;}

    .container03{float: left;width: 398px;height: 50px;}

    </style>

    <title>解决IE6下文字溢出的问题</title>

</head>

<body>

    <div class="container01">

        <!--这是注释-->

        <div class="container02"></div> 

        <div class="container03">↓这就是多出来的那个字</div>

    </div>

</body>

</html>

<!--在以下情况会产生文字溢出bug：

（1）一个容器里包含2个具有“float”样式的容器

（2）第二个容器的宽度大于父容器的宽度或父容器与第二个容器宽度之差小于3

（3）在第二个容器前存在注释

注释 从class="container03"前放在class="container02"前-->

在以下情况会产生文字溢出bug：
（1）一个容器里包含2个具有“float”样式的容器
（2）第二个容器的宽度大于父容器的宽度或父容器与第二个容器宽度之差小于3
（3）在第二个容器前存在注释

解决方案：注释从class="container03"前放在class="container02"前

6.清除浮动

<!DOCTYPE>

<html>

<head>

<meta http-equiv=Content-Type content="text/html; charset=utf-8"/>

<style type="text/css">

    *{

        padding: 0;

        margin: 0;

    }

    #nofloatbox {

        border: 1px solid #FF0000;

        background: #CCC;

        overflow: hidden;

        zoom:1;

    }

    #floatbox {

        float: left;

        width: 100px;

        height: 100px;

        border: 1px solid #0000FF;

        background: #00FF00;

    }

</style>

</head>

<body>

    <div id="nofloatbox">

        <div id="floatbox"></div>

    </div>

</body>

</html>

当子元素为浮动时，无法撑开父元素，结果显示为

在父元素中添加overflow:hidden;IE6中添加zoom:1;

7.hasLayout：

很多情况下，我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。

如通过zoom:1;将hasLayout设置为true;然后他就可以对自己和可能的子孙元素进行尺寸计算和定位。

8.img下方有3px的间隔

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

    #div1{

        width: 100px;

        height: 100px;

        background-color: yellow;

    }

    img {

        display: block;

    }

</style>

</head>

<body>

<img src="1.jpg" width="100" height="100" />

<div id="div1"></div>

</body>

</html>

将img设置display:block;

常见bug及解决方案的更多相关文章

CSS控制之IE常见BUG及解决方案
常见bug 解决方案盒模型bug 使用严格doctype声明双倍margin bug _display:inline; 不认识a:link 不加:link 3像素margin bug 规范浮动与清 ...
H5 播放视频常见bug及解决方案
本文摘自:本文来自“小时光茶社(Tech Teahouse)”公众号原文:https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw 1. 自动播放问题通过 ...
jquery博客收集的IE6中CSS常见BUG全集及解决方案
今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...
IE6中CSS常见BUG全集及解决方案——摘自网友
IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...
windows蓝屏代码大全及常见蓝屏解决方案
对于以下的代码查询建议使用ctrl+F查询,而且很多蓝屏与黑屏的问题多是最近操作引起的,例如更新驱动,安装新的硬件.软件--把相关的配置调到最近的正常状况大多可以解决,确实不行时方可考虑重装系统,解决 ...
IE6的那些css常见bug（汇总）
IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了虽说很早之前就知道博客园这个地方但怕自己不能坚持去写一些东西一直没有建.这几天我做了这个决定把我的博客建起来每周发一些看到的, ...
我的第一篇文章 —— IE6的那些css常见bug（汇总）
我的微博终于在前几天建立了虽说很早之前就知道博客园这个地方但怕自己不能坚持去写一些东西一直没有建.这几天我做了这个决定把我的博客建起来每周发一些看到的,听到了一些前端知识或者前沿技术. 另外 ...
常用样式制作思路自定义按钮~自适应布局~常见bug seajs简记初学者必知的HTML规范不容忽略的——CSS规范
常用样式制作思路学习常用样式总结参考来自这里带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...
ie7,8常见bug，共计257个bug汇总?如何解决ie的历史bug
ie7.8常见bug,共计257个bug汇总针对web开发者来说,浏览器的bug,特备是ie的bug是很多人的噩梦,因为ie的更新换代没有ff,chrome,safari,opera那么快,而且ie ...

随机推荐

tyvj1098 任务安排
描述 N个任务排成一个序列在一台机器上等待完成(顺序不得改变),这N个任务被分成若干批,每批包含相邻的若干任务.从时刻0开始,这些任务被分批加工,第i个任务单独完成所需的时间是Ti.在每批任务开始前, ...
LYDSY模拟赛day1 String Master
/* 暴力枚举两个后缀,计算最长能匹配多少前缀. 最优策略一定是贪心改掉前 k 个失配的字符. 时间复杂度 O(n3). */ #include<cstdio> ],b[]; int ma ...
一些PHP性能优化汇总
PHP优化对于PHP的优化主要是对php.ini中的相关主要参数进行合理调整和设置,以下我们就来看看php.ini中的一些对性能影响较大的参数应该如何设置. # vi /etc/php.ini (1) ...
父类方法返回子类实例：PHP延迟静态绑定
案例分析先前的PHP项目中,看到类似于以下的一段代码: <?php class DBHandler { public function get() { } } class MySQLHandl ...
第2月第5天 arc invocation getReturnValue
http://blog.csdn.net/zengconggen/article/details/38024625
按Enter键执行表单验证
document.onkeydown = function(evt){ var evt = window.event?window.event:evt; if (evt.keyCode==13) { ...
Angularjs 脏值检测
文章转自:http://www.ituring.com.cn/article/39865 构建自己的AngularJS,第一部分:Scope和Digest 原文链接:http://teropa.inf ...
Angularjs 双向绑定机制解析
文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...
创建GitHub博客
1. 创建GitHub账号 GitHub技术博客首先需要GitHub账户,请在官网按照步骤自行注册账号. 2. 创建博客仓库使用注册的账户登录,然后点击创建仓库,输入项目信息如下所示,注意项目名称规 ...
C#通过事件跨类调用WPF主窗口中的控件
xaml.cs文件: using System; using System.Timers; using System.Windows; using System.Windows.Forms; name ...

常见bug及解决方案

常见bug及解决方案的更多相关文章

随机推荐

热门专题