当前位置：文档之家 › 解决IE6中左浮动 左边双倍问题

解决IE6中左浮动 左边双倍问题

  • 格式：doc
  • 大小：43.00 KB
  • 文档页数：3

解决IE6中左浮动 左边双倍问题

一：什么是双边距Bug？

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left) 来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

先来看一下图片：

在下面的实验中，我们要让这个绿色的盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：

以下为引用的内容：

.floatbox {

float: left;

width: 150px;

height: 150px;

margin: 5px 0 5px 100px;

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

}

看起来是很简单的吧？但是当我们在IE6中查看时，却会发现左侧外边距100像素，被扩大到200个像素。如下图：

二：该如何来修正这个Bug？

这个修正其实很简单，只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单？对，就这么简单。如下图：

CSS代码如下：

以下为引用的内容：

.floatbox {

float: left;

width: 150px;

height: 150px;

margin: 5px 0 5px 100px; display: inline;

}

以上方法是我在网页设计中总结出来并不断实践过的方法，希望能让浏览到这篇文章喜欢学习的兄弟姐妹受益！

合集下载

IE6兼容兼容心得(自己总结的)

IE6兼容兼容心得(自己总结的)

使用以下DOCTYPE可使避免IE6进入怪异模式,不适用文档声明或使用HTML3以下的文档声明会是IE6进入向下兼容IE5的怪异模式

DOCTYPE (Document Type) 文档类型，说明 XML 或者 (x)HTML 的版本。DTD (Document Type Definitions) 文档类型定义，浏览器根据 DTD 来解释页面标识，并展现出来。DOCTYPE 通常（但不总是）包含指定的DTD文件的URL。浏览器一般不读取这些文件，而是只识别常见的 DOCTYPE 声明。HTML 4.01 TransitionalHTML 4.01 Frameset XHTML 1.0 StrictXHTML 1.0 Transitional XHTML 1.0 FramesetXHTML 1.1源文档 文档类型2010年8月19日16:32

分区IE6兼容的第1 页 根据w3c关于stack level的介绍可以得出以下stack level规则父级stacking context的背景、边界1.z-index值为负值的定位元素（值越小越在下）2.文本流中非定位的block块级子元素3.脱float块的文本4.文本流中非定位的float浮动子元素/文字元素5.脱块文本/行内元素6.z-index：auto/0的定位元素7.z-index值为正的定位元素（值越大越在上）8.每个stacking context都包括以下stack level （后来居上）：IE6/IE7的规则父级stacking context的背景、边界1.z-index值为负值的定位元素（值越小越在下）2.脱块文本脱float块文本(ie7)/行内元素3.未固定宽度文本流中非定位的block块级子元素4.固定宽度文本流中非定位的block块级子元素/文本流中非定位的、float浮动子元素/文字5.z-index：auto/0的定位元素6.z-index值为正的定位元素（值越大越在上）7.每个stacking context都包括以下stack level （后来居上）：垂直堆栈2010年8月20日10:58

如何解决IE兼容性

如何解决IE兼容性

如何解决IE兼容性

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示 效果不统一的情况，在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者 登陆我们的系统，都应该是统一的显示效果。随着浏览器版本的增多，解决 IE浏览器兼容性显得尤

为重要.

一、！important （ 功能有限）

随着IE7对!important 的支持，!important 方法现在只针对IE6的兼容.（注意写法.记得该声明位

置需要提前.）

例如：

#example {

width: 100px !important; /* IE7+FF */

width: 200px; /* IE6 */

}

二、CSS HACK勺方法（新手可以看看，高手就当路过吧）

首先需要知道的是：

所有浏览器通用height: 100px;

IE6 专用 _height: 100px;

IE7 专用 *+height: 100px;

IE6、IE7 共用 *height: 100px;

IE7、FF 共用 height: 100px !important;

例如：

#example { height:100px; } /* FF */

* html #example { height:200px; } /* IE6 */

*+html #example { height:300px; } /* IE7 */ 下面的这种方法比较简单

举几个例子：

1、IE6 - IE7+FF

#example {

height:100px; /* FF+IE7 */

_height:200px; /* IE6 */

}

其实这个用上面说的第一种方法也可以

#example { height:100px !important; /* FF+IE7 */

height:200px; /* IE6 */

}

2、 IE6+IE7 - FF

几种常用的清除浮动方法

几种常用的清除浮动方法

⼏种常⽤的清除浮动⽅法

1、⽗级div定义伪类：after和zoom

div2

原理：IE8以上和⾮IE浏览器才⽀持:after，原理和⽅法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器⽀持好，不容易出现怪问题（⽬前：⼤型⽹站都有使⽤，如：腾迅，⽹易，新浪等等）

缺点：代码多，不少初学者不理解原理，要两句代码结合使⽤，才能让主流浏览器都⽀持

建议：推荐使⽤，建议定义公共类，以减少CSS代码

评分：★★★★☆

2.在结尾处添加空div标签clear:both

div2

原理：添加⼀个空div，利⽤css提⾼的clear:both清除浮动，让⽗级div能⾃动获取到⾼度优点：简单，代码少，浏览器⽀持好，不容易出现怪问题

缺点：不少初学者不理解原理；如果页⾯浮动布局多，就要增加很多空div，让⼈感觉很不爽

建议：不推荐使⽤，但此⽅法是以前主要使⽤的⼀种清除浮动⽅法

评分：★★★☆☆

3.⽗级div定义height

div2

原理：⽗级div⼿动定义height，就解决了⽗级div⽆法⾃动获取到⾼度的问题

优点：简单，代码少，容易掌握

缺点：只适合⾼度固定的布局，要给出精确的⾼度，如果⾼度和⽗级div不⼀样时，会产⽣问题

建议：不推荐使⽤，只建议⾼度固定的布局时使⽤

评分：★★☆☆☆

4.⽗级div定义overflow:hidden

div2

原理：必须定义width或zoom:1，同时不能定义height，使⽤overflow:hidden时，浏览器会⾃动检查浮动区域的⾼度

优点：简单，代码少，浏览器⽀持好

缺点：不能和position配合使⽤，因为超出的尺⼨的会被隐藏

建议：只推荐没有使⽤position或对overflow:hidden理解⽐较深的朋友使⽤

评分：★★★☆☆

5.⽗级div定义overflow:auto

div2

原理：必须定义width或zoom:1，同时不能定义height，使⽤overflow:auto时，浏览器会⾃动检查浮动区域的⾼度

最全的IE6,IE7,IE8与Fireofx浏览器兼容问题整理(2)

最全的IE6,IE7,IE8与Fireofx浏览器兼容问题整理(2)

从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.

CSS技巧

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left;

margin:5px; display:inline;}

3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0

100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;

4 IE与宽度和高度的问题 IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两 个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: