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. Windows 系统变量大全

    来源:http://blog.csdn.net/kingwolf_javascript/article/details/2477234 %ALLUSERSPROFILE% : 列出所有用户Profil ...

  2. wl18xx wifi编译出现没有编译wlcore_sdio的情况

    打开config.mk ........................................................................................ ...

  3. auto ash v1

    startdate=$1enddate=$2#reporttype=$3#reportformat='text'oraclehome=`echo $ORACLE_HOME` dbid=`sqlplus ...

  4. zend frameword 基本语法

    #resources.frontController.moduleDirectory = APPLICATION_PATH "/modules"#resources.frontCo ...

  5. 正确使用#include和前置声明(forward declaration)

    http://blog.csdn.net/SpriteLW/article/details/965702

  6. 更换arm-linux-gcc 4.3.2编译器

    先创建一个临时目录:mcx@mcx-virtual-machine:/home/work/tools$ mkdir tmp 解压到根目录:mcx@mcx-virtual-machine:/home/w ...

  7. scala模式匹配与样例类

    样本类:添加了case的类便是样本类.这种修饰符可以让Scala编译器自动为这个类添加一些语法上的便捷设定.如下: 1.添加与类名一致的工厂方法.也就是说,可以写成Var("x") ...

  8. 什么是Jsp

    1.什么是jsp java server page(java 服务器端页面技术),是 sun 公司制订的一种服务器端动态页面生成技术的规范. 因为直接使用 servlet 生成页面,如果页面比较复杂, ...

  9. Ubuntu 9.10+ apache2.2 +Django的配置

    1.首先安装mod_python apt-get install libapache2-mod-python2.6 (Ubuntu 9.10默认安装的是python 2.6版,如果是2.5可改为 li ...

  10. 关于this指针理解

    1. this指针的用处: 一个对象的this指针并不是对象本身的一部分,不会影响sizeof(对象)的结果.this作用域是在类内部,当在类的非静态成员函数中访问类的非静态成员的时候,编译器会自动将 ...