原文:
http://www.noupe.com/css/using-javascript-to-fix-12-common-browser-headaches.html
我们提倡无论何时都尽可能地使用CSS,这样我们更容易取得成功.现在浏览器对CSS的支持已经非常好,肯定足以让你用来控制你的网页布局与排版.但,即使如此,还是有某些页面元素会在不同的浏览器下表现也不一样.
如果你不了解其中的原由,请不用担心,深入一下CSS的规则并且看一下 Using CSS to Fix Anything: 20+ Common Bugs and Fixes
这个文章.
如果上面那篇文章对你毫无帮助,你可以使用下面12个javascript解决方案的其中之一去修复你的问题,并使你的页面看起来跨所有浏览器!
在本文中,我们将为你在web应用开发中遇到的最常见的CSS问题提供12个javascript解决方案.
你也许会对其它的CSS相关文章感兴趣.
1. 设置等高
自从我们抛弃以表格为基础的布局方式,创建视觉上等高的列或内容块就成为了一个挑战.
1.1 使用jquery设置等高
jQuery有个插件可以设置同一个容器内的所有盒子模型的高度相等,而且还可以创建非常简洁的网格--当然,额外的性能开销也是微乎其微的.从可
用性与性能的角度来看,使用一个简单的javascript代替会更适合: equalHeights()
这个函数检测同一个容器中所有兄弟节点元素的高度,然后设置每个元素的最小高度为这些元素中高度值最大的那个.
如何运作
equalHeights() 循环指定元素的顶层子节点,并设置它们的最小高度值为最高的节点的高度值.
1.2 使用jQuery设置等高列
另一个设置等高的jQuery插件
$("#col1, #col2").equalizeCols();
上面代码设置#col1, #col2列等高
$("#col1, #col2").equalizeCols("p,p");
上面代码会设置#col1,#col2等高,并把增加额外空间的元素添加到#col1和#col2下的p元素中去.
2. IE6 PNG 图片通明支持
IE6及早期的版本不支持png图片透明.虽然可以使用一些小窍门令IE5.5或IE6支持png透明,但这不是理想的方式而且难于使用. 让我们来看看能做点什么,以支持IE6的用户,同时使绝大部分的网站访客能充分获得透明带来的好处.
2.1 加强IE6使其支持透明
IE7.js
是由Dean Edwards编写一个javascript库,加强了MSIE(IE6, IE5)的行为,使其看起来就像兼容标准的浏览器一样.它修复了IE5与IE6下的许多CSS问题并能使png透明正常工作.它还允许使用先进的CSS选择器.
2.2. iFixPng improved
它修复了IE6及更早版本的png图片问题,包括所有图片元素及使用CSS设定的背景图片. 这个插件是原来的jQuery插件 iFixPng
的改进版本.特征有: 修复指定图片或带背景图元素的问题*, 支持使用了CSS背景中background-position属性的图片, 还修复了IE绝对定位的问题. (bottom: -1px || bottom: 0px)
3. 用JavaScript改变CSS类
这是一个简单的JavaScript函数,它可以改变当前文档中任何元素的类.当要在运行时使用CSS类代替硬编码的样式值改变样式时,这个函数非常有用.
代码:
function changeClass(oldClass, newClass) {
var elements = document.getElementsByTagName("*");
for( i = 0; i < elements.length; i++ ) {
if( elements[i].className == oldClass ) elements[i].className = newClass;
}
}
function changeClass(oldClass, newClass) { var elements =
document.getElementsByTagName("*"); for( i = 0; i <
elements.length; i++ ) { if( elements[i].className == oldClass )
elements[i].className = newClass; }}
4. 浏览器中的CSS选择器
试想一下,你只要键入一个特殊的选择器,你就可以为当前浏览器中设置了类名的元素编写javascript代码了.
4.1 CSS Browser
这是一段非常简单的javascript代码,它短小精悍,能使你使用CSS选择器.使用它你可以在任何浏览器编写特殊的CSS代码. 你可以为浏览器中设置了类名的元素写上一段javascript代码.
jQuery browser selectors
另外一个选择就是使用jQuery,它可以让你使用浏览器的选择器更加方便,你所需要做的事就是引入jQuery, 然后编写如下代码:
$(document).ready(function(){
$('html').addClass($.browser);
});
现在你可以准备好.msie, .mozilla, .opera, .safari 或 .other 这些依赖目标浏览器的样式了.
5. 最大/最小宽高支持
对于CSS的min-width, min-height, max-width, max-height, border-*-width, margin, 与padding属性在某些浏览器不被支持的问题,jQuery提供了非常好的解决方案.
5.1 jQMinMax
这个jQuery插件为没有提供原生支持min-width, max-width, min-height与max-height这些属性的浏览器添加支持.
5.2 JSizes
这个基于jQuery的小插件为CSS的min-width, min-height, max-width, max-height,
border-*-width, margin,
还有padding属性提供支持.另外,它还提供了一个检查元素是否可见的方法.由于它所有与大小相关的方法都是返回数值,所以用于计算DOM元素的尺寸
是非常安全的.
下载的例子演示了可以使用无返回值的方法链.
jQuery(function($) {
var myDiv = $('#myDiv'); // set margin-top to 100px and
margin-bottom to 10em myDiv.margin({top: 100, bottom: '10em'}); //
displays the size of the top border in pixels
alert(myDiv.border().top); // displays true if the element is
visible, false otherwise alert(myDiv.isVisible()); // set
padding-right to 10px and margin-left to 15px using chaining
myDiv.padding({right: 10}).margin({left: 15});});
6. 水平或垂直居中元素
你以前也许遇到过这个问题:水平或垂直居中页面元素. 在CSS中垂直居中是非常困难的,
特别是你想支持所有主流浏览器的情况下.非常幸运,现在已经有了解决方案,其中一个方式就是从高度与宽度中取得元素左边与顶部页边距值再除以2,得到的便
是要居中元素的margin-left与margin-top.(这句话理解不知道有没有问题)
6.1 居中页面元素插件
这个插件可以居中页面的任何元素,使用了水平与垂直上减去页边距的办法.
$("element").center(); //vertical and horizontal$("element").center({ horizontal: false // only vertical});
6.2 我如何垂直居中页面元素?
在这个视频教程中,Jeffrey Jordan Way会向你展示如何利用CSS与jQuery组合的威力,在浏览器垂直居中图片.
7. 在IE中显示Q标签
表现引号应该使用Q标签而不是blockquote标签.然而,windows下的IE不支持这个标签,因此,很多开发都不使用Q标签.
7.1QinIE
当你把这段脚本引入到你的网页文档头部,它就可以自动地把页面中的Q标签替换成引号(包括对应的结束引号). 如果将来IE支持Q标签,你可能要修改它,加上浏览器版本的判断.
8. 增大点击目标的范围以获得更直接的切换
对厌烦的‘Read More…’说再见,使你整个内容块都可以点击进入目标链接!
9. Lazy loader
这是一个jQuery插件. 它可以使(内容较长的)页面的图片延迟加载.在viewport(页面的可见部分)之外的图片不会被加载,直到用户拖动滚动条到它们的时候.这与 图片预载
是截然相反的.
10. bgiframe
这个jQuery插件可以轻松解决IE z-index的问题.
11. ieFixButtons
这个jQuery插件可以修复button元素在IE6 与IE7下的怪异行为.
12. Fix Overflow
这个插件修复IE下的水平溢出问题.特别地,IE会自动为溢出的元素添加滚动条,如果元素只有一行,那这个滚动条就会覆盖在元素的上面.这个插件通过调整元素的填充来修复这个问题.
分享到:
相关推荐
ErrorBoard, 跟踪和修复浏览器触发的JavaScript错误 访客 ErrorBoard跟踪并修复访问者浏览器触发的JavaScript错误。屏幕截图 先决条件Node.js 和 NPM免费端口安装$ git clone git://github.com/Lapp
我们提倡尽可能使用CSS,而且我们常常能做到这一点。现代浏览器有很好的CSS支持-这无疑足够好让你使用CSS来控制布局和版面设计。但是有时候,某些网页元素在不同的浏览器会出现不同。
如果上面那篇文章对你毫无帮助,你可以使用下面12个javascript解决方案的其中之一去修复你的问题,并使你的页面看起来跨所有浏览器! 在本文中,我们将为你在web应用开发中遇到的最常见的CSS问题提供12个javascript解决...
用Javascript拍摄浏览器屏幕截图 (左侧为原始页,右侧为PNG输出) 由于以下原因,可以开发此库: Gripeless是针对Web应用程序的免费投诉解决方案让您的用户拍摄重要问题的屏幕截图,然后将其发送到您的问题跟踪器...
修复ios浏览器局部滚动因不满一屏而引起的bug
####Algorithm IV 的调试器是一个控制台包装器,可修复跨浏览器控制台问题并提供一组新的控制台方法,使您的控制台更强大。 它将允许您减少查找错误所需的时间和代码量,自动插入断点、配置文件和计时器,并使用一...
如果这些也无效,您可以通过下面列出的12个javascript解决方案修复它,这样您的网页看起来就能跨越所有浏览器了! 在本文中,我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案。 ...
临时修复浏览器中日期对象的错误操作(修复浏览器的 Microsoft 更新 KB2998527)。 问题简述 发布上述更新后,我遇到了以下问题: 在 IE 中(浏览器模式 =“Internet Explorer 10 兼容视图”,文档模式 =“IE8 ...
楔(原 W3JS) 一个客户端 JavaScript 库,专注于通过实现 W3 规范来修复浏览器兼容性。
修复了一个长期存在的问题,而如果在 tinyMCE 中选择图像时激活浏览器,浏览器窗口将指向索引文件或 webroot 文件。 饼干,饼干饼干。 拖放文件上传应该功能齐全。 添加了一个拖动栏,允许您调整侧边栏/浏览器的...
已知高危漏洞得到全部修复,兼容微软最新的Windows 11操作系统,全新的V8 JavaScript编译器Sparkplug 和short builtins 机制的引入,再加上chrome新内核页面JS执行能力,使得64位内核的360极速浏览器X相对于32位360...
标签为IE8和其他旧式浏览器中针对输入标签系统JavaScript修复程序,这些浏览器不支持将click事件传递给其for输入的标签。
基于更强大的JavaScript V8引擎极强高效超快的浏览器,谷歌浏览器是一款可让您更快速、轻松且安全地使用网络的浏览器,它的设计超级简洁,使用起来更加方便,Google Chrome支持多标签浏览,每个标签页面都在独立的...
本次更新对修复了以下问题: [Webkit 核心] * 解决一些页面兼容性问题. * 解决一些崩溃问题. * 从 WebSite-Watcher 调用傲游3, 打开保存在本地的网页时会出现 404 错误. * 对特殊字符转码问题会导致页面出现 404 ...
随着您的学习越来越深入,将引入越来越多的Javascript语法,这将使您能够解决更复杂的问题并使用更高级的技术。从浏览器运行Koans 只需使用文件浏览器导航到Javascript Koans文件夹,然后双击KoansRunnner.html。 ...
一键式JavaScript切换是Chrome浏览器的扩展程序,它允许通过浏览器图标或上下文菜单按主机名和子域即时启用/禁用JavaScript。 这是控制允许运行JavaScript的网站的最快,最方便的方法。 这是Maxime Le Breton出色的...
修复当前版本(V3.1.6)在IE6、7、8中我遇到的诡异问题,也帮助大家少踩这些坑!
创建该项目的目的是减轻手工编辑十六进制转储的痛苦,并探索现代JavaScript语法以及现代Chrome浏览器支持的API(未测试其他浏览器-欢迎提出修复可能问题的请求!)。 如果您发现任何错误,则想添加缺少的范围,更新...
一些人反对直接使用undefined变量进行比较,因为在旧的浏览器中允许它的值被重新赋值,比如下面这样: undefined = "test" 在被重新赋值后,使用undefined指令将不能正确的检测一个变量是否被赋值。 不过,这个行为...