`
xlongbuilder
  • 浏览: 41744 次
  • 性别: Icon_minigender_1
  • 来自: 上海->杭州
社区版块
存档分类
最新评论

IE6/IE7和Firefox对Div处理的差异

FirefoxIECSS算法XHTML 
阅读更多

IE6/IE7和Firefox对Div处理的差异

作者：miyiyi[at]gmail[点]com
  • 来源:http://www.blabla.cn/html_ref/firefox_ie_diff01.html
  • 时间：2006-12-20

基本HTML代码

<!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>
<title>Div Float Sample</title>
<style type="text/css">
div { margin:3px; }
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
</style> 
</head>
<body>
<div class="d1">
    <div class="d2">&nbsp;</div>
    <div class="d3">&nbsp;</div>
</div>
</body>
</html>

以上代码显示的结果如下，很正常，结果相同。

下面会在这个基础上进行修改，修改的内容都在style中，其他代码就不再重复写了。

请注意，这里的Style中用到了min-height，这个和height是不同的，min-height指定了对象的一个最小高度，当对象的子内容高度超过这个最小高度是，这个对象会自动撑大。这是一个非常牛的style，可惜的是，在这个style和float这个同样牛的style一起使用的时候，就会出现各种问题。

内部一个Div修改成为float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }

显示结果如下。

这个结果中，Firefox有点离谱了，两个框叠在一起也就罢了，为什么那个红框会变大捏？而且变的大小也很诡异，不知道是按照什么公式计算出来的。IE在这里的显示应当是附和标准的。

内部两个Div都修改成为float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }

显示结果如下。

在这种情况下，Firefox的结果尚能解释，可能是float把外层的Div也作为内层float影响的范围，这样内层的就不会将外层的Div撑大了。IE在这里出现了Margin失效的情况，可以解释为内层第二个float造成了影响。

干脆把外层的Div也修改成为float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }

显示结果如下，

这种情况下，Firefox正常了，而IE延续了前面的不正常情况。

外层是float:left，内层最后一个不再float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }

显示结果如下，

这和前面第一种加float:left的情况相同。

结论

再重申一次，本文讨论的是一个比较高级的话题。如果在style中用height而不是min-height来设定高度，是不会出现以上这些问题的。不过，不用min-height就失去了div自动撑大这一个很有必要的特性。

在min-height和float:left的情况下，没有一种完美的写法让Firefox和IE结果相同。不过仍然可以发现绕开的方法。

进一步试验可以发现，margin遭到的影响在padding上比较好，所以最好是padding和margin都不用，或者只用padding。

两者相同的代码如下，

div { padding:3px; }
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }

显示结果如下，

呵呵，总算是一样了，虽然是凑合着一样了。幸好一样了，否则只好用table了。

当然所有这些情况也许是有合理解释的，说不定增加某一个style的设置，这些问题都迎刃而解了，不过目前我还没有找到这个设置。

关于Doctype

以上代码在下面这些Doctype下试验过，结果相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
分享到：
评论
11 楼 jwsh1984 2008-09-16  
楼主写得太乱, 建议好好参考一下css的规范说明
10 楼 hax 2008-09-08  
楼主没有好好阅读CSS规范，根本没有正确理解float，就乱blah blah，是很不负责任的行为。

还有，提示一下，你这里的IE中的div，由于有width属性，所以一律都hasLayout。

9 楼 zbm2001 2008-08-05  
<p> d3包含非空字符（行内元素），由于d3和浮动元素d2等宽，该非空字符排列于浮动元素d2的下方，并保持与d2的margin值。</p>
<p> </p>
<p>阅读CSS2.1</p>
8 楼 archerzz 2008-08-05  
我觉得文章里对float的理解有点偏差。Float的element是从正常的文档流中脱离出来的，所以这能解释当只有d2是float:left的时候FF的表现了，这个时候d2不在原来的文档流中，正如前面axers说的，d3取代了d2的位置。这里比较奇怪的是FF下d3的高度问题，突然变成了64px（FF3下的结果），不知道哪一位达人来解释一下。但是IE的表现更有问题的。
而2个都是float的时候，更好解释了，因为d2和d3都脱离了原来文档流，我觉得这个时候IE的表现是不对的。
7 楼 ayeah 2008-08-04  
我的项目，准备只支持ff和ie7，等以后有市场用户多了，就只支持ff，不支持IE！
6 楼 sunfengcheng 2008-08-04  
楼主可真是不辞辛苦啊！微软该放下架子了，我的web程序，很多在firefox都可以，就是到IE6 、IE7 不可以！调试bug也相当不好！上面的这位仁兄讲的是对的！
5 楼 axers 2008-08-02  
你说的不完全正确

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }

这段Style Firefox的处理并不是你看到的那样，因为d2 float:left，d3取代了d2的位置，而d2与d3不重叠是因为d3所在的div中的个&nbsp;空字符，你去掉就重合了，d3高度的算法是(大概描述，非真实算法)：d2的高度>d3的高度?(d2的高度+内容的高度):d3的高度(自动适应内容)

对于d2,d3都float:left后ie中margin无效，firefox中外层div不会自适应大小的问题，可以通过添加辅助div解决（不用在d1中float:left，有些时候外层是不适合float的）:

.clear{clear:both;margin:0;padding:0;font-size:0;line-height:0;}

<div class="d1">   
<div class="d2"></div>
<div class="d3"></div>
<div class="clear"></div>
</div>

还有就是ie6与ie7对min-height的解析方式也是不同的，只有ie7支持min-height，ie6中使用height就有自动适应内容大小的作用，可以使用：

min-height:20px;_height:20px;

来兼容ie6与ie7
4 楼 downpour 2008-08-02  
题目有点大，其实只是float在浏览器中的不同表现。不过文章很全面啊。
3 楼 sjz209 2008-08-02  
不错，学到了些东西，谢谢了
2 楼 freelancer 2008-05-21  
学习！！～～～～～～～
1 楼 s79 2008-05-17  
IE6不支持min-height吧？
看来IE7加上min-height能打到IE6自动撑大的效果。以前没发现。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

    尤其是在处理旧版Internet Explorer（如IE6、IE7、IE8）与现代浏览器（如Firefox、Chrome等）之间的样式差异时，CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例，帮助...

    CSS兼容大全IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器

    CSS 兼容大全 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等浏览器 CSS 兼容大全是指在不同的浏览器中，例如 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等，如何使网页正常显示的技术。这个技术的核心是 CSS Hack，即...

    多浏览器下IE6 IE7 firefox li 间距问题

    特别是对于早期版本的Internet Explorer（如IE5、IE5.5、IE6、IE7）与现代浏览器（如Firefox）之间存在的差异更为明显。本文将详细介绍如何解决这些浏览器中`&lt;li&gt;`元素的间距兼容性问题。 #### 测试环境与目标 本...

    div+css 完全兼容 样式兼容性 ie6 ie7 IE8 IE9 和firefox方法

    1. **理解浏览器差异**：首先要明白，Internet Explorer（尤其是早期版本如6、7和8）对CSS标准的实现与Firefox等其他现代浏览器有所不同，这包括对盒模型、浮动、透明度、渐变、边距塌陷等方面的处理。 2. **盒模型...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器"，这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**： DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

    ie6/7/8的 css hack

    【CSS Hack】在Web开发中，CSS Hack是一种特殊的技术，用于解决不同浏览器对CSS解析的差异，特别是针对老版本的Internet Explorer（IE6、IE7和IE8）的兼容性问题。这些浏览器在解析CSS时存在诸多不一致，导致设计师...

    div错位解决IE6IE7IE8样式不兼容问题

    本文将详细介绍如何解决div错位问题以及针对IE6、IE7和IE8的样式不兼容解决方案。 #### 一、理解IE6、IE7、IE8的CSS渲染差异 1. **IE6的盒模型问题**：IE6在处理CSS盒模型时存在bug，导致元素的宽度计算出现问题。...

    CSS hack 针对IE6，IE7，firefox显示不同效果

    首先，我们需要了解IE6、IE7和Firefox对CSS属性支持的差异。IE6是一个较为特殊的浏览器，它不支持CSS2的大部分新特性，并且对于一些CSS选择器和属性存在解析上的问题。IE7在某些方面对CSS的支持有所改进，但仍与标准...

    (十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.pdf

    然而，不同的浏览器对CSS的支持程度和解析方式存在差异，特别是老版本的Internet Explorer（如IE6、IE7、IE8）与Firefox等现代浏览器。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度兼容性**...

    div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法.docx

    3. **盒模型差异**：Firefox等标准浏览器和IE6/7的盒模型不同，导致`padding`和`border`会影响元素的`width`和`height`。解决方法是使用`box-sizing`属性，或针对IE使用`*{margin:0;padding:0;}`。 4. **`!...

    DIV+CSS网页中IE和火狐兼容问题的整理

    然而，在实际应用中，由于不同浏览器的解析和渲染机制存在差异，尤其是在IE（Internet Explorer）和Firefox之间，这种差异可能导致兼容性问题。以下是对这些兼容性问题的详细梳理和解决策略。 1. **盒模型差异** -...

    (十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.docx

    然而，不同的浏览器对于CSS的支持程度和解析方式存在差异，特别是老版本的Internet Explorer（IE6、IE7、IE8）与Firefox等其他浏览器之间。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度不...

    css解决IE6,IE7,firefox兼容性问题.

    尤其在2000年代中期，IE6、IE7 和 Firefox 的用户量占据了市场的大部分份额。由于这些浏览器对 CSS 的支持程度各不相同，导致网页设计者在开发过程中常常遇到兼容性问题。本文旨在详细介绍如何通过 CSS hack 技术...

    Firefox, IE5, IE5.5, IE6, IE7, IE8多种浏览器兼容的问题

    ### Firefox, IE5, IE5.5, IE6, IE7, IE8 多种浏览器兼容的问题 在早期的Web开发阶段，不同的浏览器之间存在显著的技术差异，这导致了跨浏览器兼容性问题的出现。本篇文章将针对Firefox、IE5、IE5.5、IE6、IE7以及...

    div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf

    本文将深入探讨如何使CSS样式兼容IE6、IE7、IE8、IE9以及Firefox、Chrome等现代浏览器。 1. **DOCTYPE声明的影响**： DOCTYPE声明对于浏览器的渲染模式至关重要。在HTML文档的顶部加入正确的DOCTYPE，如`&lt;!DOCTYPE...

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    2. **居中对齐**：Firefox中，设置`div`的`margin-left`和`margin-right`为`auto`即可实现居中，但IE6和IE7需要通过设置`body`的`text-align`为`center`，然后让`div`的`margin`自动调整。 3. **高度和宽度的适应**...

    div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法.pdf

    针对`IE6`、`IE7`、`IE8`、`IE9`以及`Firefox`、`Chrome`等浏览器的兼容性问题，我们可以采取以下策略： 1. **DOCTYPE声明**：DOCTYPE声明会影响浏览器进入不同的渲染模式。为了确保统一的行为，通常使用XHTML 1.0...

Magicbox
Global site tag (gtag.js) - Google Analytics