为什么IE6下容器的宽度和FF解释不同呢 ?
<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
div { cursor:pointer; width:200px; height:200px; border:10px solid red }
</style>
<div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容</div> 问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关知识,请参考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=trueIE6,IE7,FF IE7.0 出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们，为解决IE7.0的兼容问题，找来了下面这篇文章：现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！下面是三个浏览器的兼容性收集.
第一种，是CSS HACK的方法
height:20px;
*height:25px;
_height:20px;
注意顺序。 这样也属于CSS HACK，不过没有上面这样简洁。
#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }
<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]> <!-- 适合于IE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->
<!--[if lte IE 6]> <!-- 适合于IE6及一下 --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
第三种，css filter的办法，以下为经典从国外网站翻译过来的。.
新建一个css样式如下： #item { width: 200px; height: 200px; background: red; } 新建一个div,并使用前面定义的css的样式： <div id="item">some text here</div> 在body表现这里加入lang属性,中文为zh： <body lang="en"> 现在对div元素再定义一个样式： *:lang(en) #item{ background:green !important; } 这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式： #item:empty { background: green !important } :empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
分享到：
相关推荐
### CSS完美兼容IE6_IE7_FF的通用方法 在网页设计与开发过程中，浏览器兼容性问题一直是前端开发者面临的重要挑战之一。特别是在早期的Web开发中，如何让网站同时兼容Internet Explorer 6（简称IE6）、Internet ...
### CSS完美兼容IE6、IE7与Firefox的通用方法详解 在Web开发的历史长河中，浏览器兼容性一直是开发者面临的重大挑战，尤其是处理早期版本的Internet Explorer（IE6和IE7）与现代浏览器如Firefox之间的差异。本文将...
本文主要探讨如何使用CSS Hack来实现CSS在IE6、IE7和Firefox之间的完美兼容。 首先，我们来看两种基本的CSS Hack方法： 1. `!important` Hack `!important` 规则用于提高CSS声明的优先级。在IE7及更新版本中，它...
一、CSS HACK ... /* IE7+FF */width: 80px; /* IE6 */}</style> 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.<style>#wrapper{#wrapper {
在探讨CSS样式兼容IE6、IE7、IE8与火狐浏览器的方法时，我们需深入理解不同浏览器对CSS的支持差异，以及如何通过特定的技术手段确保网页在这些浏览器中的一致性和美观性。以下是对这一主题的详细解析： ### 1. 了解...
- **顺序与优先级**：浏览器的优先级别为Firefox < IE7 < IE6，因此在编写Hack时需考虑书写顺序，一般为FF → IE7 → IE6。 ##### **1.3 示例** ```css #demo { width: 100px; } *html #demo { width: 120px; } /*...
标题中的“css样式表兼容总结,兼容火狐,ie6,ie7,FF”指的是在网页设计中，CSS样式表需要处理不同浏览器之间的兼容性问题，特别是老版本的Internet Explorer（IE6和IE7）以及Firefox。描述中的“css样式表火狐,ie6,ie...
本文主要针对IE6、IE7和Firefox（FF）这三种浏览器的CSS兼容性进行详解。 首先，我们来看一下如何处理CSS兼容性问题。一种常用的方法是利用CSS Hack，即针对特定浏览器添加特定的样式规则。例如，对于`height`属性...
### CSS兼容IE6, IE7, FF的技巧详解 #### 一、CSS Hack技术解析 在Web开发过程中，由于不同的浏览器对CSS的支持程度不同，尤其是IE6与IE7这类较老版本的浏览器，在处理CSS样式时存在差异。为了确保网站在不同...
### CSS兼容IE6、IE7、FF的技巧详解 #### 一、CSS Hack技术 **CSS Hack**是一种针对不同浏览器的特性和版本差异编写特定样式的技术。它可以帮助开发者解决跨浏览器兼容性问题。 ##### 1. 通用Hack方法 对于**IE6...
### 解决IE5/IE5.5/IE6/FF的兼容性问题——CSS 随着Web技术的发展，浏览器之间的差异一直是前端开发人员头疼的问题之一。尤其是对于早期的浏览器（如Internet Explorer 5/5.5/6 和 Firefox），由于它们对CSS的支持...
#### 三、解决CSS兼容性问题的具体方法 1. **解决ul和ol的默认padding值问题** - 在 Firefox 中，默认的 `padding-left` 值约为 40px，而 IE 中则为 0。解决方案是： ```css ul, ol { margin: 0; padding: 0; } ...
在网页设计中，CSS（层叠样式表）的浏览器兼容性问题是一大挑战，尤其是在处理老版本的浏览器，如IE6、IE7时。不同浏览器对CSS的理解和解析方式存在差异，导致样式在不同浏览器中可能表现不一致。本文将详细介绍如何...
本文将重点探讨IE6、IE7以及Firefox之间的CSS兼容性写法，帮助开发者更好地解决实际项目中的兼容性问题。 #### 二、CSS Hack技术概述 为了确保网页在不同浏览器中的表现一致，开发者常常会采用一种名为“CSS Hack”...
### Firefox, IE5, IE5.5, IE6, IE7, IE8 多种浏览器兼容的问题 在早期的Web开发阶段，不同的浏览器之间存在显著的技术差异，这导致了跨浏览器兼容性问题的出现。本篇文章将针对Firefox、IE5、IE5.5、IE6、IE7以及...