用Javascript解决常见浏览器兼容性问题的12种方法

如果不知道原因，不用太担心，请研究CSS规则，查看这篇文章：使用CSS纠正所有： 20个常见错误和修复。如果它不起作用，您可以使用下面列出的12个javascript解决方案来修复它，这样您的网页就可以在所有浏览器中查看！在本文中，我们将揭示开发web应用程序时可能遇到的12个最常见的CSS问题的javascript解决方案。

1. 自动匹配高度

自从我们放弃了基于Table的页面布局以来，创建高度相同的列或内容框的视觉效果一直是一个挑战。1.1使用jQuery设置匹配高度。这个jQuery插件“平衡”了同一个容器中盒子的高度，并创建了一个简短的网格——。几乎从可用性和性能的角度来看，它反而使用了简单的JavaScript:equalHeights()函数用容器测量容器中所有同级别元素的高度，然后将每个元素的最低高度设置为最高元素的高度。如何工作equalHeights()通过循环确定指定元素的最高级别的子节点，然后将它们的最小高度值设置为最高元素的高度。点击这里预览效果1.2用jQuery匹配列高，另一个插件$ ("# col1，# col2 ")。可以使盒子高度相等的equal cols()；匹配高度$ ("# col1，# col2 ")。如你所想均衡cols(“p，p”)；匹配这两个卷，并在#col1或#col2(较短的一个)中的p标签后添加空格。

2. IE6 PNG透明支持

IE6以下版本不支持png透明度。使用hack，IE 5.5和6已经可以支持了，但是hack不理想，使用起来比较困难。让我们看看我们能做些什么来支持IE6用户，并为网站的大多数访问者带来最好的透明度。2.1迫使IE6支持透明IE7的是一个由狄恩爱德华兹建立的JavaScript库，以迫使MSIE(IE6，IE5)表现得像一个兼容标准的浏览器。它修复了许多CSS问题，并使透明的PNG在IE6和IE5下工作。它还允许高级CSS选择器。点击查看预览效果，点击下载源文件2.2。改进ifix png 。

修复IE6及以下PNG图片的问题，可以使用IMG标签和CSS背景图片。这个插件是对原始iFixPng插件的改进。特点：带有背景图片的图片或标签，现在支持背景定位，包括IE浏览器绝对定位的修正。(bottom3360-1px | | bottom3360 0px)点击查看预览效果，点击此处下载源文件

3. 用Javascript改变class

。

这是一个方便的JavaScript函数，可以将当前文件中任何元素的类从oldClass更改为newClass。快速使用CSS代替编码来改变样式特别有用。function changeClass(oldClass，new class){ var elements=document . getelementsbytagname(" * ")；for(I=0；一.要素.长度；i ) { if(elements[i]。className==oldClass)元素[i]。className=newClass}}点击查看预览效果，点击下载源文件

4. CSS浏览器选择器

。如果你能输入一个特殊的选择器，你可以在这里写一些JavaScript。如果根据当前浏览器的名称在标签中设置一个类，会怎么样？

4.1 CSS浏览器这是一个非常小的javascript，只有一行，不到1kb。它允许CSS选择器。它允许您为每个操作系统和浏览器编写特定的CSS代码。可以写一些JavaScript，设置Class的名称，即内容基于当前浏览器。点击查看预览效果，点击下载源文件jQuery浏览器选择器。这里有另一个非常简单的方法来处理基于jQuery的浏览器选择器。您只需要加载jQuery库文件并添加以下代码。$(文档)。ready(function(){ $('html '))。addClass($。浏览器)；});现在你可以准备你的风格了，比如。msie，mozilla。歌剧。safari或其他目标浏览器。点击预览效果

5. 最小/最大 高度/宽度支持

。对于CSS最小宽度、最小高度、最大宽度、最大高度、边框*-宽度、边距和填充属性，这里有一些很好的jQuery修正。5.1 jQMinMax这是一个jQuery插件，增加了对不支持最小宽度、最大宽度、最小高度和最大高度的地方的支持。点击查看预览效果，点击下载源文件

5.2 JSizes

。这个小jQuery插件增加了对CSS最小宽度、最小高度、最大宽度、最大高度、边框*-宽度、边距和填充属性的支持。特别是，他提供了一种确定元素可见位置的方法。由于方法的所有模型都返回数值，因此这些也可以安全地用于严格的DOM元素。jQuery(函数($){ var myDiv=$(' # myDiv ')；//将上边距设为100px，下边距设为10em myDiv.margin({top: 100，bottom : ' 10em ' })；//以像素为单位显示顶部边框的大小alert(myDiv.border()。顶部)；//如果元素可见则显示true，否则显示false alert(mydiv . isvisible())；//使用chaining MyDiv . padding({ right : 10 })将填充从右到10px和边距从左到15px设置。边距({ left : 15 })；});点击查看预览效果，点击下载源文件

6. 元素垂直/水平居中

。您可能以前遇到过这个问题：水平或垂直居中一个元素。在CSS中垂直居中是相当麻烦的，尤其是如果你想支持所有主流浏览器的话。

6.1居中元素插件该插件可以将页面中所有元素居中，纵横居中采用css负边距法。$(“元素”)。center()；//垂直和水平$(“元素”)。居中({ horizontal: false //仅垂直})；点击查看预览效果，点击下载源文件6.2如何将元素垂直居中？在本视频教程中，Jeffrey Jordan Way将向您展示如何使用jQuery和CSS的强大功能在浏览器中垂直居中显示图片。

7. 在IE里使用Q标签

人们期望使用Q标签而不是blockquote标签来显示引号。但是IE/Win不支持Q标签，正因为如此，大多数网站的作者都选择不使用Q标签。7.1聂琪当你把IE浏览器中这个脚本自动扫描的网页Q的标签添加到你的文件头，并正确显示(包括嵌套引用)。将来(如果)IE浏览器支持Q标签时，这个插件会增加浏览器版本检查。点击下载源文件

8. 增加点击目标的大小和获得更多的响应转换

。

把你所有的内容放在一个可点击的标签上，告别单调的“阅读更多……”链接。点击下载源文件

9. Lazy loader

Lazy loader是一个jQuery。它可以延迟页面内图片的加载。直到用户浏览地平线之外的图片(页面的可见部分)，才会加载。这与图像预加载正好相反。点击查看预览效果，点击这里下载源文件

10. bgiframe

，轻松解决IE下z-index的问题。

点击查看预览效果，点击这里下载源文件

11. ieFixButtons

ieFixButtons是一个jquery插件，修复了IE6和ie7的按钮标签的bug。点击查看预览效果，点击这里下载源文件

12. 溢出(overflow)修正

纠正ie下的水平溢出。在IE溢出的元素中显示一个滚动条，尤其是当元素中只有一行时，滚动条会覆盖这一行。这个插件通过修改填充来纠正这个问题。

点击查看预览效果，点击此处下载原文英文源文件：使用JAVASCRIPT修复12个常见浏览器标题中文翻译原文：用JavaScript纠正12个常见浏览器问题。