http://blog.shaogroup.com/divcss-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95%E6%95%B4%E7%90%86.html

http://www.ituring.com.cn/article/64951

1. 【IE6】浮动双倍边距bug：

问题 ：同时使用“float”和“margin”，则margin在IE6下实际显示为双倍。

解决：给浮动容器定义display:inline

demo:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>css 双边距问题</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .float-box {

            float: left;

            width: 150px;

            height: 150px;

            margin: 5px 0 5px 300px;

            /*display: inline;*/

            /*外边距的最后一个值保证了300像素的距离*/

        }

    </style>

</head>

<body>

<div class="float-box">

    双边距bug（IE6）

</div>

</body>

</html>

2. 【IE6】width和height值 = 最小值

问题：IE6不认min-height，但hight=min-height。若只设定min-height，IE6下等于没有高度；若只设定高度，IE6会自动将内容撑大。标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的。

解决：

height: auto!important; /*使其他浏览器高度自适应*/

height: 100px; /*针对IE6 最小高度*/

min-height: 100px; /*针对其他浏览器最小高度*/

demo

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>IE6 min-height 不认问题</title>

    <style>

        body {

            font-family: Arial, Helvetica, 宋体, sans-serif;

            font-size: 12px;

            text-align: center;

            background-color: #D4D5CC;

        }

        #wrapper {

            height: auto !important; /*使其他浏览器高度自适应*/

            height: 500px; /*针对IE6 最小高度*/

            min-height: 500px; /*针对其他浏览器最小高度*/

            width: 760px;

            background-color: #e5e5e5;

            border: 1px solid #fff;

            text-align: left;

            line-height: 150%;

            padding: 20px;

            margin: 10px auto;

        }

    </style>

</head>

<body>

<div id="wrapper">

    Hello World <br/>

    Hello World <br/>

    Hello World <br/>

    Hello World <br/>

    Hello World <br/>

    Hello World <br/>

</div>

</body>

</html>

3. 【IE6】为什么无法定义1px左右高度的容器？

问题：这是因为默认的行高造成的

解决：(选择一种)

①、overflow:hidden;

②、zoom:0.08;

③、line-height:1px;

demo:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>IE6 div 不能实现1px 高度的几种解决方法</title>

    <style>

        .test {

            font-size: 0px;

            height: 1px;

            line-height: 1px;

            background-color: red;

        }

        .test2 {

            height: 1px;

            overflow: hidden;

            background-color: red;

        }

        /*.test3 {*/

            /*height: 1px;*/

            /*zoom: 0.08;*/

            /*background-color: red;*/

        /*}*/

    </style>

</head>

<body>

<div class="test">&nbsp;</div>

<div class="test2"></div>

<div class="test3"></div>

</body>

</html>

4. 【IE6】mirror margin bug

问题：当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。 padding也会出现类似问题

解决：外层元素设定border 或 设定float。

DIV+CSS 常见问题及解决办法整理的更多相关文章

  1. 实战中总结出来的CSS常见问题及解决办法

    一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对 一个标签同时使用cla ...

  2. PHPmailer发送邮件时的常见问题及解决办法

    来源:http://www.chinastor.com/a/jishu/mailserver/0G392262014.html 使用PHPmailer发送邮件时的常见问题总结: 一,没有定义发送邮箱$ ...

  3. 【转载】IE浏览器常见的9个css Bug以及解决办法

    IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...

  4. FineUIMvc 常见问题及解决办法

    Ø  简介 FineUIMvc 是基于 jQuery 的专业 ASP.NET MVC/Core 控件库,本文主要介绍 FineUIMvc 的常见问题及解决办法. 1.   View 中无法调用 Htm ...

  5. fetch使用的常见问题及其解决办法

    摘自: https://segmentfault.com/a/1190000008484070 fetch使用的常见问题及其解决办法 javascript wonyun 2月25日发布 |   0 收 ...

  6. fetch的常见问题及其解决办法

    摘要: 玩转fetch. 作者:wonyun 原文:fetch使用的常见问题及其解决办法 Fundebug经授权转载,版权归原作者所有. 首先声明一下,本文不是要讲解fetch的具体用法,不清楚的可以 ...

  7. WebView加载本地html、js文件常见问题及解决办法

    声明:基于android studio平台,php语言搭建服务器 目录: 一.JavaScript脚本语言没有反应 二.alert无法弹出 三.html页面之间不能跳转 四.屏幕缩放没有达到预期效果 ...

  8. rsync @ERROR: auth failed on module backup 解决思路及附录rsync常见问题及解决办法

    昨晚小版本上线,使用rsync往服务器上传文件时,client报如下异常: @ERROR: auth failed on module backup rsync error: error starti ...

  9. ORA-00907: 缺失右括号，原因及解决办法整理

    ORA-00907: 缺失右括号,原因及解决办法整理 1 union all中order by 导致缺失右括号 在有union all的子查询中使用了order by,会导致缺失右括号的错误,事实上在 ...

随机推荐

  1. Hibernate 关系映射方式(1)

    来源:本文转载自:http://blog.csdn.net/huangaigang6688/article/details/7761310 Hibernate映射解析——七种映射关系 首先我们了解一个 ...

  2. MSSQL 字符串XML 合成列

    declare @str varchar(2000) set @str='1,2,3,4,6,8,5,9,10,11,12,13,14,15,16,17,18,19,20,29,30,31,32,33 ...

  3. ListView控件的Insert、Edit和Delete功能第三部分（自我总结）

    1.刚开始在第一部分显示数据的时候出现如下错误: 修改: @Page 中的EnableEventValidation="false" 2.点击各个按钮没有反应. 修改:为page_ ...

  4. 后台运行之BackgroundWorker

    BackgroundWorker 类允许您在单独的专用线程上运行操作. 耗时的操作(如下载和数据库事务)在长时间运行时可能会导致用户界面 (UI) 似乎处于停止响应状态. 如果您需要能进行响应的用户界 ...

  5. LightOJ 1058 平行四边形的判断定理

    题目大意:给你n个点,求这n个点最多能组成多少个平行四边形. 题目思路:这道题卡时间,而且卡内存.你要尽可能的想办法优化. 平行四边形的判定定理: 两组对边分别平行的四边形是平行四边形(定义判定法): ...

  6. cc2530学习笔记

    case KEY_CHANGE://按键事件 case AF_INCOMING_MSG_CMD://接收数据事件,调用函数AF_DataRequest()接收数据 case ZDO_STATE_CHA ...

  7. 转： 理解 JMeter 聚合报告（Aggregate Report）

    Aggregate Report 是 JMeter 常用的一个 Listener,中文被翻译为“聚合报告”.今天再次有同行问到这个报告中的各项数据表示什么意思,顺便在这里公布一下,以备大家查阅. 如果 ...

  8. 转：jmeter实践

    本文主要介绍性能测试中的常用工具jmeter的使用方式,以方便开发人员在自测过程中就能自己动手对系统进行自动压测和模拟用户操作访问请求.最后还用linux下的压测工具ab做了简单对比. 1.      ...

  9. 转：Selenium2.0介绍——WebDriver两种驱动浏览器的方式.

    如果之前熟悉Selenium RC,理解了Selenium RC是如何工作的,那么,当第一次接触Selenium WebDriver的时候,看到WebDriver居然可以不需要指定远端服务器的IP地址 ...

  10. PAT (Advanced Level) 1106. Lowest Price in Supply Chain (25)

    简单dfs #include<cstdio> #include<cstring> #include<cmath> #include<vector> #i ...