做一个左右结构的页面，左边导航，右边显示内容，使用div+css，过程中发现ff和IE效果不一样
原始代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
div.d1 {
float: left;
width: 18%;
background-color: red;
}
div.d2 {
width: 80%;
float: right;
background-color: green;
}
div.d3 {
background-color: blue;
width: 800px;
}
</style>
</head>
<body>
<div class="d3">
<div class="d1">
<ul>
<li>
<a href="#">Link A</a>
</li>
<li>
<a href="#">Link A</a>
</li>
<li>
<a href="#">Link A</a>
</li>
</ul>
</div>
<div class="d2">
Content
</div>
</div>
Other Content
</body>
</html>
此时，IE效果正常，ff不正常。d3的高度不会自动进行调整，"Other Content"会显示在d2下面，而不是d3下面。
代码改成
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
div.d1 {
float: left;
width: 18%;
background-color: red;
}
div.d2 {
width: 80%;
float: right;
background-color: green;
}
div.d3 {
background-color: blue;
width: 800px;
}
</style>
</head>
<body>
<div class="d3">
<div class="d1">
<ul>
<li>
<a href="#">Link A</a>
</li>
<li>
<a href="#">Link A</a>
</li>
<li>
<a href="#">Link A</a>
</li>
</ul>
</div>
<div class="d2">
Content
</div>
<div style="clear:both"></div>
</div>
Other Content
</body>
</html>
FF，IE全部正常。
<div style="clear:both"></div>
增加了这一行。
分享到：
相关推荐
7. **链接样式**：在Firefox中，要为链接添加边框和背景色，可以设置`display: block`和`float: left`。为避免底部边距错位，可以设置链接和其容器的高度。 8. **盒模型差异**：Firefox和IE对盒模型的解释不一致，...
再者，浮动元素`float`在IE和Firefox中的表现也有所不同，有时会导致父级元素塌陷，此时可以使用`clearfix`类或者`display:table`来解决。还有，定位`position`在两个浏览器中的解析可能有差异，特别是涉及到`z-...
### 滤镜问题-FireFox火狐浏览器与IE的对比分析 在Web开发领域，浏览器兼容性一直是开发者关注的重点之一。特别是在早期的Web技术发展中，不同浏览器对标准的支持程度存在较大差异，导致了多种特有的样式和效果实现...
在网页设计中，CSS（层叠样式表）的兼容性问题常常困扰着开发者，尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法： 1. **DOCTYPE声明**：DOCTYPE声明会...
特别是在早期的Web时代，Internet Explorer（简称IE）与Mozilla Firefox（简称火狐）这两款浏览器之间存在着显著的差异，这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...
### Firefox 下 `margin-top` 失效问题及解决方案 #### 一、问题概述 在进行网页设计时，尤其是在使用Mozilla Firefox浏览器环境下，开发者可能会遇到一个常见的布局问题：当尝试通过CSS中的`margin-top`属性来调整...
7. **边框与背景色**：在Firefox中，给链接添加边框和背景色，应设置`display: block`和`float: left`以防止换行。有时可能需要设置高度以避免底部错位。 8. **盒模型差异**：Firefox和IE对盒模型的理解不同，导致...
对于CSS的`float`属性，IE使用`styleFloat`，而Firefox使用`cssFloat`。要解决这个问题，可以使用条件语句检测浏览器类型： ```javascript var header = document.getElementById("header"); if (document.all) { ...
在Firefox中，设置`display: block`和`float: left`可以创建一个固定高度的菜单栏，但在IE中，相同的代码可能导致菜单栏的高度异常。为了解决这个问题，可以使用`height`属性，并确保所有浏览器都正确解析。 #### 8...
### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言 随着互联网技术的发展，浏览器种类日益增多，其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期，IE6、IE7 和 ...
- `float`属性：IE使用`styleFloat`，Firefox使用`cssFloat`。可以通过检测`document.all`来确定浏览器类型并采用相应方式设置。 - `<label>`的`for`属性：IE使用`getAttribute("htmlFor")`，Firefox使用`...
针对IE6、IE7和Firefox显示不同效果的CSS hack是前端开发中常见的需求，特别是在使用CSS+DIV布局时。本文将详细讲解如何使用CSS hack来区分这三种浏览器，并提供一些实用的技巧和方法。 首先，我们需要了解IE6、IE7...
### CSS兼容IE6、IE7、IE8及Firefox解析与应用 #### 一、引言 随着Web技术的发展，浏览器的兼容性问题一直是前端开发者关注的重点。尤其在早期的Web开发过程中，Internet Explorer（IE）系列浏览器由于市场份额较大...
在前端开发中，CSS兼容性是一个常见的挑战，尤其是在处理IE和Firefox这两个浏览器时。由于它们对CSS标准的实现存在差异，导致在不同浏览器下显示的效果可能不尽相同。以下是一些关键点，帮助开发者理解和解决这些...
1. CSS 的 "float" 属性：在IE中，使用 `styleFloat`，而在Firefox中使用 `cssFloat`。可以编写条件语句进行区分，例如： ```javascript if (document.all) { document.getElementById("header").style....
标题中的"sql+xml+firefox"表明我们关注的是SQL（结构化查询语言）、XML（可扩展标记语言）以及Firefox浏览器这三者的技术知识。下面将分别详细介绍这三个领域的关键知识点。 **SQL（结构化查询语言）** SQL是用于...