浏览器兼容性问题解决方案整理

浏览器兼容性问题整理 浏览器兼容性问题是前端开发中一个非常重要的议题，特别是在不同浏览器之间存在着许多差异。今天，我们将讨论IE6、7、8和火狐等浏览器常见的兼容性问题，并总结出一些常用的CSS hack方法来解决这些问题。 首先，浏览器兼容性的问题有很多，要在工作中不断总结。这篇文章将总结一些常见的浏览器兼容性问题，并提供相应的解决方法。 IE6、7、8和火狐等浏览器之间存在着许多差异。例如，IE6能识别下划线”_”和星号”*“，IE7能识别星号”*“，但不能识别下划线”_”，IE8能识别”9″，但不能识别下划线”_”，而火狐两个都不能认识，卻可以识别‘!important’。这些差异导致了在不同浏览器中样式的显示结果不一致。 书写顺序是一个非常重要的概念。在写CSS代码时，一般是将识别能力强的浏览器的CSS写在后面。这样可以确保在不同浏览器中样式的显示结果一致。 下面，我们将列举一些常用的CSS hack方法： 1. !important !important作用是提高指定样式规则的应用优先权。IE7以及所有标准浏览器能识别!important。例如： [css] .browserTest{ border:20px solid #60A179!important; border:20px solid #00F; } [/css] 在Mozilla中或者IE7浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：在IE6中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色： 2. * IE都能识别*；标准浏览器(如火狐)不能识别*。例如： [css] .browserTest{ border:20px solid #60A179; *border:20px solid #00F; } [/css] 3. _ IE6支持下划线，IE7和firefox均不支持下划线。例如： [css] .browserTest{ border:20px solid #60A179; *border:20px solid #00F; _border:20px solid ###; } [/css] 4. *+html与*html *+html与*html是IE特有的标签,firefox暂不支持.而*+html又为IE7特有标签。例如： [css].browserTest{ *+html { border:20px solid #60A179; } *html { border:20px solid #00F; } [/css] 浏览器兼容性问题是一个非常复杂的议题，我们需要不断总结和学习新的解决方法。只有通过不断的实践和总结，我们才能更好地解决浏览器兼容性问题，提高我们的开发效率和质量。