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:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>css 双边距问题</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         .float-box {
  13.             float: left;
  14.             width: 150px;
  15.             height: 150px;
  16.             margin: 5px 0 5px 300px;
  17.             /*display: inline;*/
  18.             /*外边距的最后一个值保证了300像素的距离*/
  19.         }
  20.  
  21.     </style>
  22. </head>
  23. <body>
  24. <div class="float-box">
  25.     双边距bug（IE6）
  26. </div>
  27. </body>
  28. </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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>IE6 min-height 不认问题</title>
  6.     <style>
  7.         body {
  8.             font-family: Arial, Helvetica, 宋体, sans-serif;
  9.             font-size: 12px;
  10.  
  11.             text-align: center;
  12.             background-color: #D4D5CC;
  13.         }
  14.  
  15.         #wrapper {
  16.             height: auto !important; /*使其他浏览器高度自适应*/
  17.             height: 500px; /*针对IE6 最小高度*/
  18.             min-height: 500px; /*针对其他浏览器最小高度*/
  19.             width: 760px;
  20.             background-color: #e5e5e5;
  21.             border: 1px solid #fff;
  22.             text-align: left;
  23.             line-height: 150%;
  24.             padding: 20px;
  25.             margin: 10px auto;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.  
  31. <div id="wrapper">
  32.     Hello World <br/>
  33.     Hello World <br/>
  34.     Hello World <br/>
  35.     Hello World <br/>
  36.     Hello World <br/>
  37.     Hello World <br/>
  38. </div>
  39. </body>
  40. </html>

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

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

解决：(选择一种)

①、overflow:hidden;

②、zoom:0.08;

③、line-height:1px;

demo:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>IE6 div 不能实现1px 高度的几种解决方法</title>
  6.     <style>
  7.         .test {
  8.             font-size: 0px;
  9.             height: 1px;
  10.             line-height: 1px;
  11.             background-color: red;
  12.         }
  13.  
  14.         .test2 {
  15.             height: 1px;
  16.             overflow: hidden;
  17.             background-color: red;
  18.         }
  19.  
  20.         /*.test3 {*/
  21.             /*height: 1px;*/
  22.             /*zoom: 0.08;*/
  23.             /*background-color: red;*/
  24.         /*}*/
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="test">&nbsp;</div>
  29. <div class="test2"></div>
  30. <div class="test3"></div>
  31. </body>
  32. </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. Inno Setup入门（十七）——Inno Setup类参考（3）

    分类: Install Setup 2013-02-02 11:28 433人阅读 评论(0) 收藏 举报 标签 标签(Label)是用来显示文本的主要组件之一,也是窗口应用程序中最常用的组件之一,通 ...

  2. 转：SSH原理与运用（二）：远程操作与端口转发

    作者:阮一峰 (Image credit: Tony Narlock) 七.远程操作 SSH不仅可以用于远程主机登录,还可以直接在远程主机上执行操作. 上一节的操作,就是一个例子: $ ssh use ...

  3. spring @Component

    使用 @Component <context:component-scan base-package="dao" />   虽 然我们可以通过@Autowired或@R ...

  4. GameUnity 2.0 文档（三） 纸片人八方向

    DirectSprite类 有别于 上篇文档出现的 AnimationSprite类 (从头播放到尾) 这个类根据 path的图,如果是 8*8 64个图 八方向,可以设置长宽和 角度 角度 代表 8 ...

  5. img图片inline-block总结

    <div style="font-size:0;"> <img data-src="http://image.zhangxinxu.com/image/ ...

  6. FlashDevelop调试Air出错

    按下F5调试命令行窗口出现错误: Starting AIR Debug Launcher... invalid application descriptor: Unknown namespace: h ...

  7. 激活OFFICE2010时,提示choice.exe不是有效的win32程序

    我在安装office2010破解版时,提示choice.exe不是有效的win32应用程序 删除choice.exe再激活,按提示找到目录删掉这个文件,需要设置显示隐藏文件夹

  8. 【项目笔记】【bug】数组空指针异常

    package com.example.googleplay.ui.holder; import java.util.ArrayList; import android.view.View; impo ...

  9. 解决getJSON的缓存问题

    $.getJSON("/portal/edu/getAllEdu?adr="+Math.random(),function(data){

  10. ERROR: No pool defined. at least one pool section must be specified in config file

    root@ubuntu:/opt/php7# /opt/php7/sbin/php-fpm [22-Sep-2015 14:29:00] WARNING: Nothing matches the in ...